<template>
    <div class="topo-properties" :style="{ '--primary-color': $store.state.settings.theme }">
        <div class="topo-properties-nav">
            <template v-if="configObject != null && isLayer == false">
                <div style="text-align: center">
                    <img style="width: 120px; height: 34px" :src="configObject.style.url" v-if="configObject.style.url" crossorigin="anonymous" />
                    <img style="width: 120px; height: 34px" src="@/assets/logo/logo.png" v-else />
                </div>
            </template>
        </div>
        <template v-if="configObject != null && isLayer == false">
            <div class="topo-properties-tabs">
                <div class="topo-properties-tab" @click="changeTab(0)" :class="{ 'topo-properties-tab-active': tabIndex == 0 }">{{ $t('index.editor.20250324-13') }}</div>
                <div class="topo-properties-tab" @click="changeTab(1)" :class="{ 'topo-properties-tab-active': tabIndex == 1 }">{{ $t('index.editor.20250324-14') }}</div>
                <div class="topo-properties-tab" @click="changeTab(2)" :class="{ 'topo-properties-tab-active': tabIndex == 2 }">{{ $t('index.editor.20250324-15') }}</div>
            </div>
            <div class="topo-properties-table">
                <!-- 组件样式 -->
                <div v-show="tabIndex == 0" class="tabClass">
                    <el-collapse v-model="activeNames" accordion>
                        <el-collapse-item :title="$t('topo.components.topoProperties.038495-2')" name="1">
                            <el-form class="topo-form">
                                <el-form-item :label="$t('topo.components.topoProperties.038495-3')">
                                    <el-input-number v-model="configObject.style.position.x" controls-position="right" size="small" style="width: 100%" />
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-4')">
                                    <el-input-number v-model="configObject.style.position.y" controls-position="right" size="small" style="width: 100%" />
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-5')">
                                    <el-input-number v-model="configObject.style.position.w" controls-position="right" size="small" style="width: 100%" />
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-6')">
                                    <el-input-number v-model="configObject.style.position.h" controls-position="right" size="small" style="width: 100%" />
                                </el-form-item>
                            </el-form>
                        </el-collapse-item>
                        <el-collapse-item :title="$t('topo.components.topoProperties.038495-7')" name="2">
                            <el-form label-width="80px">
                                <el-form-item :label="$t('topo.components.topoProperties.038495-8')">
                                    <el-input v-model="configObject.name" size="small" />
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-10')" v-if="configObject.dataBind.paramMin != undefined">
                                    <el-input-number v-model="configObject.dataBind.paramMin" controls-position="right" size="small" />
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-12')" v-if="configObject.dataBind.paramMax != undefined">
                                    <el-input-number v-model="configObject.dataBind.paramMax" controls-position="right" size="small" />
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-14')" v-if="configObject.dataBind.interval != undefined">
                                    <el-input-number v-model="configObject.dataBind.interval" controls-position="right" size="small" />
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-16')" v-if="configObject.style.weatherModel">
                                    <el-select v-model="configObject.style.weatherModel" :placeholder="$t('topo.components.topoProperties.038495-17')" style="align: center" size="small">
                                        <el-option :label="$t('topo.components.topoProperties.038495-18')" value="完整模式" />
                                        <el-option :label="$t('topo.components.topoProperties.038495-19')" value="简约模式" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-20')" v-if="configObject.style.mapModel">
                                    <el-select v-model="configObject.style.mapModel" :placeholder="$t('topo.components.topoProperties.038495-21')" style="align: center" size="small">
                                        <el-option :label="$t('topo.components.topoProperties.038495-22')" value="" />
                                        <el-option :label="$t('topo.components.topoProperties.038495-23')" value="cd05a15d5004fe34a41e6b0ce9af0a6f" />
                                        <el-option :label="$t('topo.components.topoProperties.038495-24')" value="cf0162d3c456052d841e8d48e57ff679" />
                                        <el-option :label="$t('index.editor.20250324-8')" value="ed103c0342e562d1942cdba5caa572e0" />
                                        <el-option :label="$t('index.editor.20250324-9')" value="1acdafb2bf7c668a7286647ee1b02b78" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item :label="$t('index.editor.20250324-10')" v-if="configObject.type == 'map'">
                                    <el-select v-model="configObject.style.mapType" :placeholder="$t('index.editor.20250324-13')" style="align: center" size="small">
                                        <el-option :label="$t('index.editor.20250324-11')" value="普通模式" />
                                        <el-option :label="$t('index.editor.20250324-12')" value="地球模式" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-197')" v-if="configObject && configObject.componentShow.indexOf('组态界面') > -1">
                                    <el-select v-model="configObject.dataBind.ztPageData" clearable :placeholder="$t('topo.components.topoProperties.038495-198')" size="small">
                                        <el-option :label="item.pageName" :value="item.guid + '&' + item.deviceMac" v-for="item in ztOption" :key="item.id" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-34')">
                                    <el-input-number v-model="configObject.style.zIndex" controls-position="right" size="small" />
                                </el-form-item>
                                <el-form-item :label="$t('index.editor.20250324-16')">
                                    <el-input-number v-model="configObject.style.transform" controls-position="right" @change="onAngle(configObject.style.transform)" size="small" />
                                </el-form-item>
                                <template v-if="configObject.componentShow && configObject.componentShow.indexOf('表格') > -1">
                                    <el-form-item :label="$t('index.editor.20250324-17')">
                                        <el-input-number v-model="configObject.style.rowNum" controls-position="right" size="small" />
                                    </el-form-item>
                                    <el-form-item :label="$t('index.editor.20250324-18')">
                                        <el-input-number v-model="configObject.style.columnNum" controls-position="right" size="small" />
                                    </el-form-item>
                                    <el-form-item :label="$t('index.editor.20250324-32')">
                                        <el-color-picker v-model="configObject.style.outBorderColor" show-alpha :predefine="predefineColors" color-format="hex" size="small" />
                                    </el-form-item>
                                    <el-form-item :label="$t('index.editor.20250324-19')">
                                        <el-select v-model="configObject.style.outBorderStyle" :placeholder="$t('index.editor.20250324-12')" style="align: center" size="small">
                                            <el-option :label="$t('index.editor.20250324-33')" value="none" />
                                            <el-option :label="$t('index.editor.20250324-20')" value="solid" />
                                            <el-option :label="$t('index.editor.20250324-21')" value="dashed" />
                                            <el-option :label="$t('index.editor.20250324-22')" value="dotted" />
                                            <el-option :label="$t('index.editor.20250324-23')" value="double" />
                                            <el-option :label="$t('index.editor.20250324-24')" value="groove" />
                                            <el-option :label="$t('index.editor.20250324-25')" value="ridge" />
                                            <el-option :label="$t('index.editor.20250324-26')" value="inset" />
                                            <el-option :label="$t('index.editor.20250324-27')" value="outset" />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item :label="$t('index.editor.20250324-28')">
                                        <el-input-number v-model="configObject.style.outBorderWidth" controls-position="right" size="small" />
                                    </el-form-item>
                                    <el-form-item :label="$t('index.editor.20250324-29')">
                                        <el-color-picker v-model="configObject.style.innerBorderColor" show-alpha :predefine="predefineColors" color-format="hex" size="small" />
                                    </el-form-item>
                                    <el-form-item :label="$t('index.editor.20250324-30')">
                                        <el-select v-model="configObject.style.innerBorderStyle" :placeholder="$t('index.editor.20250324-12')" style="align: center" size="small">
                                            <el-option :label="$t('index.editor.20250324-33')" value="none" />
                                            <el-option :label="$t('index.editor.20250324-20')" value="solid" />
                                            <el-option :label="$t('index.editor.20250324-21')" value="dashed" />
                                            <el-option :label="$t('index.editor.20250324-22')" value="dotted" />
                                            <el-option :label="$t('index.editor.20250324-23')" value="double" />
                                            <el-option :label="$t('index.editor.20250324-24')" value="groove" />
                                            <el-option :label="$t('index.editor.20250324-25')" value="ridge" />
                                            <el-option :label="$t('index.editor.20250324-26')" value="inset" />
                                            <el-option :label="$t('index.editor.20250324-27')" value="outset" />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item :label="$t('index.editor.20250324-31')">
                                        <el-input-number v-model="configObject.style.innerBorderWidth" controls-position="right" size="small" />
                                    </el-form-item>
                                </template>
                                <el-form-item :label="$t('index.editor.20250324-34')" v-if="configObject.componentShow && configObject.componentShow.indexOf('直播视频') > -1">
                                    <el-input v-model="configObject.videoUrl" :placeholder="$t('topo.components.topoProperties.038495-205')" size="small" />
                                </el-form-item>
                                <el-form-item :label="$t('index.editor.20250324-35')" v-if="configObject.componentShow && configObject.componentShow.indexOf('通用视频') > -1">
                                    <el-input v-model="configObject.videoUrl" :placeholder="$t('topo.components.topoProperties.038495-208')" size="small" />
                                </el-form-item>
                                <el-form-item :label="$t('index.editor.20250324-36')" v-if="configObject.componentShow && configObject.componentShow.indexOf('通用视频') > -1">
                                    <el-input v-model="configObject.imageUrl" :placeholder="$t('topo.components.topoProperties.038495-209')" size="small" />
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-212')" v-if="configObject.componentShow && configObject.componentShow.indexOf('三维') > -1">
                                    <el-select v-model="configObject.imageUrl" :placeholder="$t('topo.components.topoProperties.038495-212')" @change="selectModelChange" size="small">
                                        <el-option :label="item.modelName" :value="item.imageUrl" :key="item.id" v-for="item in ztModelOption" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-255')">
                                    <el-color-picker v-model="configObject.style.backColor" show-alpha :predefine="predefineColors" color-format="hex" size="small" />
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-37')">
                                    <el-input-number v-model="configObject.style.opacity" controls-position="right" placeholder="0.5" size="small" :step="0.1" :min="0.1" :max="1" />
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-38')">
                                    <el-input-number v-model="configObject.style.borderRadius" controls-position="right" placeholder="10" size="small" />
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-39')">
                                    <el-input-number v-model="configObject.style.boxShadowWidth" controls-position="right" placeholder="10" size="small" />
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-40')">
                                    <el-color-picker v-model="configObject.style.boxShadowColor" show-alpha :predefine="predefineColors" color-format="hex" size="small" />
                                </el-form-item>
                                <!--                                <el-form-item label="统计类型" v-if="configObject.componentShow && configObject.componentShow.indexOf('设备统计') > -1">
                                    <el-select v-model="configObject.style.pieType" :placeholder="$t('index.editor.20250324-12')" style="align: center" size="small">
                                        <el-option label="设备状态" value="设备状态" />
                                        <el-option label="报警状态" value="报警状态" />
                                        <el-option label="工单状态" value="工单状态" />
                                    </el-select>
                                </el-form-item>-->
                                <el-form-item :label="$t('topo.components.topoProperties.038495-46')" v-if="configObject.style.url != undefined">
                                    <img
                                        :src="configObject.style.url == '' ? '@/views/zutai/images/lunbo.png' : configObject.style.url"
                                        class="avatar"
                                        @click="handleClick('图片路径')"
                                        style="align: center"
                                        crossorigin="anonymous"
                                    />
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-49')" v-if="configObject.style.text != undefined">
                                    <el-input v-model="configObject.style.text" size="small" />
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-51')" v-if="configObject.style.textAlign">
                                    <el-select v-model="configObject.style.textAlign" :placeholder="$t('index.editor.20250324-12')" style="align: center" size="small">
                                        <el-option :label="$t('topo.components.topoProperties.038495-53')" value="left" />
                                        <el-option :label="$t('topo.components.topoProperties.038495-54')" value="center" />
                                        <el-option :label="$t('topo.components.topoProperties.038495-55')" value="right" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-56')" v-if="configObject.style.fontFamily">
                                    <el-select v-model="configObject.style.fontFamily" :placeholder="$t('index.editor.20250324-12')" style="align: center" size="small">
                                        <el-option :label="item" :value="item" v-for="item in fontFamilyOptions" :key="item" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-58')" v-if="configObject.style.fontSize != undefined">
                                    <el-input-number v-model="configObject.style.fontSize" controls-position="right" size="small" />
                                </el-form-item>
                                <el-form-item :label="$t('index.editor.20250324-37')" v-if="configObject.style.fontWeight != undefined">
                                    <el-input-number v-model="configObject.style.fontWeight" controls-position="right" :step="100" :min="100" :max="700" size="small" />
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-60')" v-if="configObject.componentShow && configObject.componentShow.indexOf('滤镜渲染') > -1">
                                    <el-radio-group v-model="configObject.style.isFilter" size="small">
                                        <el-radio :label="true">{{ $t('topo.components.topoProperties.038495-62') }}</el-radio>
                                        <el-radio :label="false">{{ $t('topo.components.topoProperties.038495-63') }}</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-64')" v-if="configObject.componentShow && configObject.componentShow.indexOf('组件颜色') > -1">
                                    <el-color-picker v-model="configObject.style.foreColor" :predefine="predefineColors" color-format="hex" size="small" />
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-65')">
                                    <el-radio-group v-model="configObject.style.visible" size="small">
                                        <el-radio :label="true">{{ $t('topo.components.topoProperties.038495-67') }}</el-radio>
                                        <el-radio :label="false">{{ $t('topo.components.topoProperties.038495-68') }}</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <template v-if="configObject.componentShow && configObject.componentShow.indexOf('轮播图') > -1">
                                    <el-form-item :label="$t('index.editor.20250324-38')">
                                        <el-input-number v-model="configObject.style.carouselNum" controls-position="right" @change="carouselChange(configObject.style)" size="small" />
                                    </el-form-item>
                                    <el-form-item :label="$t('index.editor.20250324-39')">
                                        <el-select v-model="configObject.style.trigger" :placeholder="$t('index.editor.20250324-12')" style="align: center" size="small">
                                            <el-option :label="$t('index.editor.20250324-40')" value="click" />
                                            <el-option :label="$t('index.editor.20250324-41')" value="" />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item :label="$t('index.editor.20250324-42')">
                                        <el-input-number v-model="configObject.style.interval" controls-position="right" size="small" />
                                    </el-form-item>
                                    <el-form-item :label="$t('index.editor.20250324-43')">
                                        <el-select v-model="configObject.style.type" :placeholder="$t('index.editor.20250324-12')" style="align: center" size="small">
                                            <el-option :label="$t('index.editor.20250324-44')" value="" />
                                            <el-option :label="$('index.editor.20250324-45')" value="card" />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item :label="$t('index.editor.20250324-46')" v-if="configObject.style.carouselNum > 0">
                                        <div style="display: inline-block" class="avatar" v-for="(item, index) in configObject.style.carouselImageList" :key="index">
                                            <img v-if="item.indexOf('http') != -1" :src="item" @click="handleClick('轮播图片-' + index)" />
                                            <img v-else :src="require('@/' + item)" @click="handleClick('轮播图片-' + index)" crossorigin="anonymous" />
                                        </div>
                                    </el-form-item>
                                </template>
                                <template v-if="configObject.componentShow && configObject.componentShow.indexOf('跑马灯') > -1">
                                    <el-form-item :label="$t('index.editor.20250324-47')">
                                        <el-input-number v-model="configObject.style.carouselTime" controls-position="right" size="small" />
                                    </el-form-item>
                                </template>
                                <template v-if="configObject.componentShow && configObject.componentShow.indexOf('远程网页') > -1">
                                    <el-form-item :label="$t('index.editor.20250324-48')">
                                        <el-input v-model="configObject.modelUrl" type="textarea" />
                                    </el-form-item>
                                </template>
                                <template v-if="configObject.componentShow && configObject.componentShow.indexOf('变量日志') > -1">
                                    <el-form-item :label="$t('index.editor.20250324-49')" v-if="configObject.style.carouselNum > 0">
                                        <el-input-number v-model="configObject.dataBind.timeNum" controls-position="right" size="small" />
                                    </el-form-item>
                                    <el-form-item :label="$t('index.editor.20250324-50')" v-if="configObject.style.carouselNum > 0">
                                        <el-input-number v-model="configObject.dataBind.timeInterval" controls-position="right" size="small" />
                                    </el-form-item>
                                    <el-form-item :label="$t('index.editor.20250324-51')" v-if="configObject.style.carouselNum > 0">
                                        <el-input-number v-model="configObject.dataBind.xInterval" controls-position="right" size="small" />
                                    </el-form-item>
                                </template>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-69')" v-if="configObject.componentShow && configObject.componentShow.indexOf('自定义echarts') > -1">
                                    <i class="el-icon-edit" @click="echartClick">{{ $t('edit') }}</i>
                                </el-form-item>
                                <template v-if="configObject.componentShow && configObject.componentShow.indexOf('地图文件') > -1">
                                    <el-form-item :label="$t('topo.components.topoProperties.038495-71')">
                                        <el-select v-model="configObject.dataBind.mapAddress" :placeholder="$t('index.editor.20250324-12')" filterable size="small">
                                            <el-option :label="$t('topo.components.topoProperties.038495-74')" value="安徽" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-75')" value="澳门" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-76')" value="北京" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-77')" value="重庆" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-78')" value="福建" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-79')" value="甘肃" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-80')" value="广东" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-81')" value="广西" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-82')" value="贵州" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-83')" value="海南" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-84')" value="河北" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-85')" value="黑龙江" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-86')" value="河南" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-87')" value="湖北" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-88')" value="湖南" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-89')" value="江苏" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-90')" value="江西" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-91')" value="吉林" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-92')" value="辽宁" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-93')" value="内蒙古" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-94')" value="宁夏" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-95')" value="青海" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-96')" value="山东" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-97')" value="上海" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-98')" value="山西" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-99')" value="四川" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-100')" value="台湾" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-101')" value="天津" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-102')" value="香港" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-103')" value="新疆" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-104')" value="西藏" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-105')" value="云南" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-106')" value="浙江" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-107')" value="自定义" />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item :label="$t('topo.components.topoProperties.038495-108')" v-if="configObject.dataBind.mapAddress == '自定义'">
                                        <el-input v-model="configObject.dataBind.mapUrl" placeholder="地图数据地址" size="small" />
                                    </el-form-item>
                                </template>
                                <template v-if="configObject.componentShow && configObject.componentShow.indexOf('悬浮提示') > -1">
                                    <el-form-item :label="$t('topo.components.topoProperties.038495-111')">
                                        <el-radio v-model="configObject.style.tipDIs" :label="true" size="small">{{ $t('topo.components.topoProperties.038495-258') }}</el-radio>
                                        <el-radio v-model="configObject.style.tipDIs" :label="false" size="small">{{ $t('close') }}</el-radio>
                                    </el-form-item>
                                    <el-form-item :label="$t('topo.components.topoProperties.038495-112')">
                                        <el-radio v-model="configObject.style.tipShow" :label="true" size="small">{{ $t('topo.components.topoProperties.038495-113') }}</el-radio>
                                        <el-radio v-model="configObject.style.tipShow" :label="false" size="small">{{ $t('topo.components.topoProperties.038495-114') }}</el-radio>
                                    </el-form-item>
                                    <el-form-item :label="$t('topo.components.topoProperties.038495-115')">
                                        <el-select v-model="configObject.style.placement" :placeholder="$t('index.editor.20250324-12')" style="align: center" size="small">
                                            <el-option :label="$t('topo.components.topoProperties.038495-117')" value="top" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-118')" value="top-start" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-119')" value="top-end" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-120')" value="bottom" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-121')" value="bottom-start" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-122')" value="bottom-end" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-123')" value="left" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-124')" value="left-start" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-125')" value="left-end" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-126')" value="right" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-127')" value="right-start" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-128')" value="right-end" />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item :label="$t('topo.components.topoProperties.038495-112')">
                                        <el-select v-model="configObject.style.effect" :placeholder="$t('index.editor.20250324-12')" style="align: center" size="small">
                                            <el-option :label="$t('topo.components.topoProperties.038495-129')" value="dark" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-130')" value="light" />
                                        </el-select>
                                    </el-form-item>
                                </template>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-133')" v-if="configObject.style.lineWidth != undefined">
                                    <el-input-number v-model="configObject.style.lineWidth" controls-position="right" size="small" />
                                </el-form-item>
                                <template v-if="configObject.componentShow && configObject.componentShow.indexOf('水流') > -1">
                                    <el-form-item :label="$t('topo.components.topoProperties.038495-135')">
                                        <el-input-number v-model="configObject.style.lineHeight" controls-position="right" size="small" />
                                    </el-form-item>
                                    <el-form-item :label="$t('topo.components.topoProperties.038495-137')">
                                        <el-input-number v-model="configObject.style.lineInterval" controls-position="right" size="small" />
                                    </el-form-item>
                                    <el-form-item :label="$t('topo.components.topoProperties.038495-139')">
                                        <el-select v-model="configObject.style.lineType" :placeholder="$t('index.editor.20250324-12')" style="align: center" size="small">
                                            <el-option :label="$t('topo.components.topoProperties.038495-141')" value="butt" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-142')" value="round" />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item :label="$t('topo.components.topoProperties.038495-143')">
                                        <el-select v-model="configObject.style.animations" :placeholder="$t('index.editor.20250324-12')" style="align: center" size="small">
                                            <el-option :label="$t('topo.components.topoProperties.038495-145')" value="正向" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-146')" value="反向" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-147')" value="静止" />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item :label="$t('topo.components.topoProperties.038495-148')">
                                        <el-select v-model="configObject.style.speed" :placeholder="$t('index.editor.20250324-12')" style="align: center" size="small">
                                            <el-option :label="$t('topo.components.topoProperties.038495-149')" value="快" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-150')" value="中" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-151')" value="慢" />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item :label="$t('topo.components.topoProperties.038495-151')">
                                        <el-input-number v-model="configObject.style.anchorPointNum" controls-position="right" size="small" />
                                    </el-form-item>
                                </template>
                                <template v-if="configObject.style.waterShape">
                                    <el-form-item :label="$t('topo.components.topoProperties.038495-154')">
                                        <el-select v-model="configObject.style.waterShape" :placeholder="$t('index.editor.20250324-12')" style="align: center" size="small">
                                            <el-option :label="$t('topo.components.topoProperties.038495-156')" value="container" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-157')" value="circle" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-158')" value="rect" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-159')" value="roundRect" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-160')" value="triangle" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-161')" value="diamond" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-162')" value="pin" />
                                            <el-option :label="$t('topo.components.topoProperties.038495-163')" value="arrow" />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item :label="$t('topo.components.topoProperties.038495-164')">
                                        <el-color-picker v-model="configObject.style.waterColor" show-alpha :predefine="predefineColors"></el-color-picker>
                                    </el-form-item>
                                    <el-form-item :label="$t('topo.components.topoProperties.038495-58')">
                                        <el-input-number v-model="configObject.style.waterFontSize" controls-position="right" size="small" />
                                    </el-form-item>
                                    <el-form-item :label="$t('topo.components.topoProperties.038495-165')">
                                        <el-input-number v-model="configObject.style.waterBorderWidth" controls-position="right" size="small" />
                                    </el-form-item>
                                    <el-form-item :label="$t('topo.components.topoProperties.038495-167')">
                                        <el-color-picker v-model="configObject.style.waterBorderColor" show-alpha :predefine="predefineColors" color-format="hex" style="align: center" size="small" />
                                    </el-form-item>
                                    <el-form-item :label="$t('topo.components.topoProperties.038495-168')">
                                        <el-color-picker v-model="configObject.style.waterBackColor" show-alpha :predefine="predefineColors" color-format="hex" size="small" />
                                    </el-form-item>
                                </template>
                                <template v-if="configObject && configObject.componentShow.indexOf('高德地图') > -1">
                                    <el-form-item :label="$t('topo.components.topoProperties.038495-20')">
                                        <el-select v-model="configObject.style.mapModel" :placeholder="$t('index.editor.20250324-12')" style="align: center" size="small">
                                            <el-option :label="$t('index.editor.20250324-53')" value="normal" />
                                            <el-option :label="$t('index.editor.20250324-54')" value="dark" />
                                            <el-option :label="$t('index.editor.20250324-55')" value="light" />
                                            <el-option :label="$t('index.editor.20250324-56')" value="whitesmoke" />
                                            <el-option :label="$t('index.editor.20250324-57')" value="fresh" />
                                            <el-option :label="$t('index.editor.20250324-58')" value="grey" />
                                            <el-option :label="$t('index.editor.20250324-59')" value="graffiti" />
                                            <el-option :label="$t('index.editor.20250324-60')" value="macaron" />
                                            <el-option :label="$t('index.editor.20250324-61')" value="blue" />
                                            <el-option :label="$t('index.editor.20250324-62')" value="darkblue" />
                                            <el-option :label="$t('index.editor.20250324-63')" value="wine" />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item :label="$t('index.editor.20250324-64')">
                                        <el-checkbox-group v-model="configObject.style.mapContent" size="small">
                                            <el-checkbox label="bg">{{ $t('index.editor.20250324-65') }}</el-checkbox>
                                            <el-checkbox label="point">{{ $t('index.editor.20250324-66') }}</el-checkbox>
                                            <el-checkbox label="road">{{ $t('index.editor.20250324-67') }}</el-checkbox>
                                            <el-checkbox label="building">{{ $t('index.editor.20250324-68') }}</el-checkbox>
                                        </el-checkbox-group>
                                    </el-form-item>
                                    <el-form-item :label="$t('index.editor.20250324-9')">
                                        <el-radio-group v-model="configObject.style.mapType" size="small">
                                            <el-radio label="2D">2D</el-radio>
                                            <el-radio label="3D">3D</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                    <el-form-item :label="$t('index.editor.20250324-69')">
                                        <el-input-number v-model="configObject.style.zoom" controls-position="right" size="small" />
                                    </el-form-item>
                                    <el-form-item :label="$t('index.editor.20250324-70')">
                                        <el-input-number v-model="configObject.style.pitch" controls-position="right" size="small" />
                                    </el-form-item>
                                    <el-form-item :label="$t('index.editor.20250324-71')">
                                        <el-color-picker v-model="configObject.style.skyColor" show-alpha :predefine="predefineColors" color-format="hex" size="small" />
                                    </el-form-item>
                                </template>
                            </el-form>
                        </el-collapse-item>
                        <el-collapse-item :title="$t('index.editor.20250324-72')" name="3" v-if="configObject.componentShow && configObject.componentShow.indexOf('3D模型') > -1">
                            <!-- 3d模型样式开始 -->
                            <template>
                                <el-form class="topo-form">
                                    <el-form-item :label="$t('index.editor.20250324-73')">
                                        <el-button size="small" icon="el-icon-upload2" circle @click="modelUploadClick"></el-button>
                                    </el-form-item>
                                    <el-form-item :label="$t('index.editor.20250324-74')">
                                        <el-checkbox v-model="configObject.loader.enablePan">{{ $t('index.editor.20250324-75') }}</el-checkbox>
                                        <el-checkbox v-model="configObject.loader.enableZoom">{{ $t('index.editor.20250324-76') }}</el-checkbox>
                                        <el-checkbox v-model="configObject.loader.enableRotate">{{ $t('index.editor.20250324-77') }}</el-checkbox>
                                        <el-checkbox v-model="configObject.loader.autoPlay">{{ $t('index.editor.20250324-78') }}</el-checkbox>
                                        <el-checkbox v-model="configObject.loader.authRoTate">{{ $t('index.editor.20250324-79') }}</el-checkbox>
                                        <el-checkbox v-model="configObject.loader.showFps">{{ $t('index.editor.20250324-80') }}</el-checkbox>
                                    </el-form-item>
                                    <div v-for="(item, index) in configObject.loader.position" style="width: 250px; padding: 15px" :key="index">
                                        <span>{{ $t('index.editor.20250324-81') - index + 1 }}</span>
                                        <el-form-item :label="$t('topo.components.topoProperties.038495-3')">
                                            <el-slider v-model="item.x" :min="-10" :max="10" :step="0.1"></el-slider>
                                        </el-form-item>
                                        <el-form-item :label="$t('topo.components.topoProperties.038495-4')">
                                            <el-slider v-model="item.y" :min="-10" :max="10" :step="0.1"></el-slider>
                                        </el-form-item>
                                        <el-form-item :label="$t('index.editor.20250324-82')">
                                            <el-slider v-model="item.z" :min="-10" :max="10" :step="0.1"></el-slider>
                                        </el-form-item>
                                    </div>
                                    <div v-for="(item, index) in configObject.loader.rotation" style="width: 250px; padding: 15px" :key="index">
                                        <span>{{ $t('index.editor.20250324-83') - index + 1 }}</span>
                                        <el-form-item :label="$t('index.editor.20250324-84')">
                                            <el-slider v-model="item.x" :min="-10" :max="10" :step="0.1"></el-slider>
                                        </el-form-item>
                                        <el-form-item :label="$t('index.editor.20250324-85')">
                                            <el-slider v-model="item.y" :min="-10" :max="10" :step="0.1"></el-slider>
                                        </el-form-item>
                                        <el-form-item :label="$t('index.editor.20250324-86')">
                                            <el-slider v-model="item.z" :min="-10" :max="10" :step="0.1"></el-slider>
                                        </el-form-item>
                                    </div>
                                    <div v-for="(item, index) in configObject.loader.scale" style="width: 250px; padding: 15px" :key="index">
                                        <span>{{ $t('index.editor.20250324-87') - index + 1 }}</span>
                                        <el-form-item :label="$t('index.editor.20250324-88')">
                                            <el-slider v-model="item.x" :min="0.1" :max="10" :step="0.1"></el-slider>
                                        </el-form-item>
                                        <el-form-item :label="$t('index.editor.20250324-89')">
                                            <el-slider v-model="item.y" :min="0.1" :max="10" :step="0.1"></el-slider>
                                        </el-form-item>
                                        <el-form-item :label="$t('index.editor.20250324-90')">
                                            <el-slider v-model="item.z" :min="0.1" :max="10" :step="0.1"></el-slider>
                                        </el-form-item>
                                    </div>
                                </el-form>
                            </template>
                        </el-collapse-item>
                        <!-- 滚动表格开始 -->
                        <el-collapse-item :title="$t('topo.components.topoProperties.038495-169')" name="4" v-if="configObject.componentShow && configObject.componentShow.indexOf('轮播表') > -1">
                            <el-form class="topo-form">
                                <el-form-item :label="$t('topo.components.topoProperties.038495-170')">
                                    <el-input-number v-model="configObject.style.rowNum" controls-position="right" size="small" />
                                </el-form-item>
                                <el-form-item :data-allow-mismatch="$t('topo.components.topoProperties.038495-172')">
                                    <el-color-picker v-model="configObject.style.foreColor" show-alpha :predefine="predefineColors" color-format="hex" style="align: center" size="small" />
                                </el-form-item>
                                <el-form-item :label="$t('index.editor.20250324-91')">
                                    <el-color-picker v-model="configObject.style.headerBGC" show-alpha :predefine="predefineColors" color-format="hex" style="align: center" size="small" />
                                </el-form-item>
                                <el-form-item :label="$t('index.editor.20250324-92')">
                                    <el-color-picker v-model="configObject.style.oddRowBGC" show-alpha :predefine="predefineColors" color-format="hex" style="align: center" size="small" />
                                </el-form-item>
                                <el-form-item :label="$t('index.editor.20250324-93')">
                                    <el-color-picker v-model="configObject.style.evenRowBGC" show-alpha :predefine="predefineColors" color-format="hex" style="align: center" size="small" />
                                </el-form-item>
                                <el-form-item :label="$t('index.editor.20250324-94')">
                                    <el-input-number v-model="configObject.style.waitTime" controls-position="right" :step="500" :min="1000" size="small" />
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-178')">
                                    <el-input-number v-model="configObject.style.headerHeight" controls-position="right" size="small" />
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-180')">
                                    <el-input-number v-model="configObject.style.columnWidth" controls-position="right" size="small" />
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-182')">
                                    <el-radio-group v-model="configObject.style.index" size="small">
                                        <el-radio :label="true">{{ $t('topo.components.topoProperties.038495-183') }}</el-radio>
                                        <el-radio :label="false">{{ $t('topo.components.topoProperties.038495-184') }}</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item :label="$t('topo.components.topoProperties.038495-185')">
                                    <el-radio-group v-model="configObject.style.carousel" size="small">
                                        <el-radio label="single">{{ $t('topo.components.topoProperties.038495-187') }}</el-radio>
                                        <el-radio label="page">{{ $t('topo.components.topoProperties.038495-188') }}</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-form>
                        </el-collapse-item>
                        <!-- 滚动表格结束 -->
                    </el-collapse>
                </div>
                <!-- 数据绑定 -->
                <div v-show="tabIndex == 1" class="tab-index-2">
                    <div style="margin-bottom: 5px" v-if="configObject.componentShow && configObject.componentShow.indexOf('参数绑定') > -1">
                        <el-tabs v-model="configObject.dataBind.activeName" v-if="configObject.componentShow && configObject.componentShow.indexOf('设备状态') > -1">
                            <el-tab-pane :label="$t('topo.components.topoProperties.038495-192')" name="变量状态"></el-tab-pane>
                            <el-tab-pane :label="$t('topo.components.topoProperties.038495-193')" name="设备状态"></el-tab-pane>
                        </el-tabs>
                        <span style="line-height: 50px; font-weight: 700; padding-left: 20px" v-else>变量选择</span>
                        <el-select
                            v-model="configObject.dataBind.imei"
                            filterable
                            :placeholder="$t('topo.components.topoProperties.038495-194')"
                            style="width: 280px; margin-left: 20px; margin-top: 10px"
                            v-if="configObject.dataBind.activeName == '设备状态'"
                            @visible-change="deviceChange"
                        >
                            <el-option :label="item.deviceName" :value="item.deviceMac" v-for="item in bDeviceZtBindList" :key="item.id"></el-option>
                        </el-select>
                        <el-input :placeholder="$t('topo.components.topoProperties.038495-195')" v-model="configObject.dataBind.paramName" readonly size="small" v-else>
                            <el-button slot="append" @click="selectVariable('参数绑定')">选择</el-button>
                        </el-input>
                        <el-divider></el-divider>
                    </div>
                    <div style="margin-bottom: 5px" v-if="configObject.componentShow && configObject.componentShow.indexOf('Snmp协议Oid') > -1">
                        <el-input :placeholder="$t('index.editor.20250324-95')" v-model="configObject.dataBind.oidName" readonly size="small">
                            <el-button slot="append" @click="selectOid()">{{ $t('select') }}</el-button>
                        </el-input>
                    </div>
                    <!-- 参数绑定结束 -->
                    <!-- echarts图表地址开始 -->
                    <div v-if="configObject.componentShow && (configObject.componentShow.indexOf('自定义echarts') > -1 || configObject.componentShow.indexOf('地图文件') > -1)">
                        <div style="margin-bottom: 10px; line-height: 20px; font-weight: 700; margin-top: 5px">
                            <span>{{ $t('index.editor.20250324-96') }}</span>
                        </div>
                        <div style="margin-bottom: 10px">
                            <el-button @click="dialogVisibleInterface = true" style="width: 100%" type="primary" size="mini">{{ $t('index.editor.20250324-97') }}</el-button>
                        </div>
                        <div>
                            <el-button @click="sendHttpRequest" style="width: 100%" type="success" size="mini">{{ $t('index.editor.20250324-98') }}</el-button>
                        </div>
                        <!-- <div style="margin-bottom:20px;">
                        <el-input v-model="configObject.dataBind.echartUrl" type="textarea" :autosize="{ minRows: 5 }"
                          placeholder="目前仅支持GET请求" />
                      </div> -->
                        <div style="margin-bottom: 10px; line-height: 20px; font-weight: 700; margin-top: 20px">
                            <span>{{ $t('index.editor.20250324-99') }}</span>
                        </div>
                        <div>
                            <el-input type="textarea" :autosize="{ minRows: 5 }" :placeholder="$t('index.editor.20250324-100')" v-model="echartData"></el-input>
                        </div>
                        <div style="margin-top: 10px" v-if="configObject.dataBind.echartUrl">
                            <el-button plain type="success" icon="el-icon-search" @click="echartHttpClick(configObject.dataBind.echartUrl)" style="width: 300px">
                                {{ $t('topo.components.topoProperties.038495-219') }}
                            </el-button>
                        </div>
                    </div>
                    <!-- echarts图表地址结束 -->
                    <!--事件点击开始 -->
                    <div v-if="configObject.componentShow && configObject.componentShow.indexOf('单击') > -1">
                        <div style="margin-bottom: 10px; line-height: 20px; font-weight: 700">
                            <span>{{ $t('topo.components.topoProperties.038495-220') }}</span>
                        </div>
                        <div style="margin-bottom: 20px">
                            <el-checkbox v-model="configObject.dataBind.djAction">{{ $t('topo.components.topoProperties.038495-303') }}</el-checkbox>
                            <el-button plain size="mini" icon="el-icon-edit" style="float: right" :disabled="!configObject.dataBind.djAction" @click="configClick('单击')">{{ $t('index.editor.20250324-101') }}</el-button>
                        </div>
                    </div>
                    <!-- 事件点击结束 -->

                    <!-- 新版线条流动判断开始 -->
                    <div v-if="configObject.componentShow && configObject.componentShow.indexOf('水流') > -1">
                        <div style="line-height: 20px; font-weight: 700">
                            <span>{{ $t('topo.components.topoProperties.038495-223') }}</span>
                        </div>
                        <div style="margin-bottom: 10px; margin-top: 10px">
                            <el-row :gutter="10">
                                <el-col :span="4" style="width: auto; margin-top: 5px">
                                    <span>{{ $t('topo.components.topoProperties.038495-224') }}</span>
                                </el-col>
                                <el-col :span="10">
                                    <el-select v-model="configObject.dataAction.paramJudge" clearable :placeholder="$t('index.editor.20250324-12')" size="small">
                                        <el-option label=">" value="大于" />
                                        <el-option label=">=" value="大于等于" />
                                        <el-option label="=" value="等于" />
                                        <el-option label="<=" value="小于等于" />
                                        <el-option label="<" value="小于" />
                                        <el-option label="!=" value="不等于" />
                                    </el-select>
                                </el-col>
                                <el-col :span="8">
                                    <el-input-number
                                        size="small"
                                        style="width: 100px"
                                        v-model="configObject.dataAction.paramJudgeData"
                                        clearable
                                        :placeholder="$t('topo.components.topoProperties.038495-225')"
                                        controls-position="right"
                                    ></el-input-number>
                                </el-col>
                            </el-row>
                        </div>
                        <div style="margin-bottom: 10px">
                            <span style="margin-right: 10px">{{ $t('topo.components.topoProperties.038495-226') }}</span>
                            <el-radio v-model="configObject.dataAction.direction" :label="$t('topo.components.topoProperties.038495-227')">
                                <span>{{ $t('topo.components.topoProperties.038495-227') }}</span>
                            </el-radio>
                            <el-radio v-model="configObject.dataAction.direction" :label="$t('topo.components.topoProperties.038495-228')">
                                <span>{{ $t('topo.components.topoProperties.038495-228') }}</span>
                            </el-radio>
                        </div>
                        <div style="margin-bottom: 10px; margin-top: 10px">
                            <el-row :gutter="10">
                                <el-col :span="4" style="width: auto; margin-top: 5px">
                                    <span>{{ $t('topo.components.topoProperties.038495-224') }}</span>
                                </el-col>
                                <el-col :span="10">
                                    <el-select v-model="configObject.dataAction.paramJudge01" clearable :placeholder="$t('index.editor.20250324-12')" size="small">
                                        <el-option label=">" value="大于" />
                                        <el-option label=">=" value="大于等于" />
                                        <el-option label="=" value="等于" />
                                        <el-option label="<=" value="小于等于" />
                                        <el-option label="<" value="小于" />
                                        <el-option label="!=" value="不等于" />
                                    </el-select>
                                </el-col>
                                <el-col :span="8">
                                    <el-input-number
                                        size="small"
                                        style="width: 100px"
                                        v-model="configObject.dataAction.paramJudgeData01"
                                        clearable
                                        :placeholder="$t('topo.components.topoProperties.038495-225')"
                                        controls-position="right"
                                    ></el-input-number>
                                </el-col>
                            </el-row>
                        </div>
                        <div style="margin-bottom: 10px">
                            <span style="margin-right: 10px">{{ $t('topo.components.topoProperties.038495-226') }}</span>
                            <el-radio v-model="configObject.dataAction.direction01" :label="$t('topo.components.topoProperties.038495-227')">
                                <span>{{ $t('topo.components.topoProperties.038495-227') }}</span>
                            </el-radio>
                            <el-radio v-model="configObject.dataAction.direction01" :label="$t('topo.components.topoProperties.038495-228')">
                                <span>{{ $t('topo.components.topoProperties.038495-228') }}</span>
                            </el-radio>
                        </div>
                    </div>
                    <!-- 线条流动判断结束 -->
                    <!-- 闪烁、旋转、显隐动画 -->
                    <div v-if="configObject.componentShow && configObject.componentShow.indexOf('动画') > -1">
                        <el-divider></el-divider>
                        <div style="margin-bottom: 10px; line-height: 20px; font-weight: 700">
                            <span>{{ $t('scada.topoMain.320129-10') }}</span>
                        </div>
                        <div style="margin-bottom: 20px">
                            <el-checkbox v-model="configObject.dataBind.xyAction">{{ $t('topo.components.topoProperties.038495-230') }}</el-checkbox>
                            <el-button plain size="mini" icon="el-icon-edit" style="float: right" :disabled="!configObject.dataBind.xyAction" @click="configClick('显隐')">{{ $t('index.editor.20250324-101') }}</el-button>
                        </div>
                        <div style="margin-bottom: 20px">
                            <el-checkbox v-model="configObject.dataBind.xzAction">{{ $t('scada.topo.editor.023345-3') }}</el-checkbox>
                            <el-button plain size="mini" icon="el-icon-edit" style="float: right" :disabled="!configObject.dataBind.xzAction" @click="configClick('旋转')">{{ $t('index.editor.20250324-101') }}</el-button>
                        </div>
                        <div style="margin-bottom: 20px">
                            <el-checkbox v-model="configObject.dataBind.ssAction">{{ $t('topo.components.topoProperties.038495-232') }}</el-checkbox>
                            <el-button plain size="mini" icon="el-icon-edit" style="float: right" :disabled="!configObject.dataBind.ssAction" @click="configClick('闪烁')">{{ $t('index.editor.20250324-101') }}</el-button>
                        </div>
                        <div style="margin-bottom: 20px">
                            <el-checkbox v-model="configObject.dataBind.hdAction">{{ $t('topo.components.topoProperties.038495-233') }}</el-checkbox>
                            <el-button plain size="mini" icon="el-icon-edit" style="float: right" :disabled="!configObject.dataBind.hdAction" @click="configClick('滑动')">{{ $t('index.editor.20250324-101') }}</el-button>
                        </div>
                    </div>
                    <!-- 状态开关开始 -->
                    <div v-if="configObject.componentShow && configObject.componentShow.indexOf('状态开关') > -1" style="margin-top: 10px">
                        <el-divider></el-divider>
                        <div style="margin-bottom: 10px; line-height: 20px; font-weight: 700" v-if="configObject.dataBind.activeName == '变量状态'">
                            <span>{{ $t('topo.components.topoProperties.038495-234') }}</span>
                            <i class="el-icon-plus" style="margin-right: 10px; margin-left: 10px; font-size: 18px" @click="addSwitch"></i>
                            <i class="el-icon-delete" @click="deleteSwitch" style="font-size: 18px"></i>
                            <div style="margin-top: 10px">
                                <el-row :gutter="5" style="margin-bottom: 10px" v-for="(item, index) in configObject.dataBind.stateList" :key="index">
                                    <el-col :span="8">
                                        <el-select v-model="item.paramCondition" clearable placeholder="" size="small">
                                            <el-option label=">" value="大于" />
                                            <el-option label=">=" value="大于等于" />
                                            <el-option label="=" value="等于" />
                                            <el-option label="<=" value="小于等于" />
                                            <el-option label="<" value="小于" />
                                            <el-option label="!=" value="不等于" />
                                        </el-select>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-input-number size="small" style="width: auto" v-model="item.paramData" clearable :placeholder="$t('scada.topoMain.320129-3')" :controls="false"></el-input-number>
                                    </el-col>
                                    <el-col :span="4">
                                        <img v-if="item.imageUrl" :src="item.imageUrl" @click="handleClick('状态开关-' + item.id)" class="avatar-switch" crossorigin="anonymous" />
                                        <i v-else class="el-icon-plus avatar-uploader-icon-switch" @click="handleClick('状态开关-' + item.id)"></i>
                                    </el-col>
                                    <el-col :span="4">
                                        <el-color-picker v-model="item.foreColor" :predefine="predefineColors" color-format="hex" />
                                    </el-col>
                                </el-row>
                            </div>
                        </div>
                        <!-- 状态开关结束 -->
                        <!-- 设备状态判断在线、离线、报警 -->
                        <div v-if="configObject.dataBind.activeName == '设备状态'">
                            <div>
                                <span>设备离线</span>
                                <img v-if="this.configObject.dataBind.shutImageUrl" :src="configObject.dataBind.shutImageUrl" class="bgAvatar" @click="handleClick('开关状态(关)')" crossorigin="anonymous" />
                                <i v-else class="el-icon-plus avatar-uploader-icon" @click="handleClick('开关状态(关)')"></i>
                            </div>
                            <div>
                                <span>设备在线</span>
                                <img v-if="this.configObject.dataBind.openImageUrl" :src="configObject.dataBind.openImageUrl" class="bgAvatar" @click="handleClick('开关状态(开)')" crossorigin="anonymous" />
                                <i v-else class="el-icon-plus avatar-uploader-icon" @click="handleClick('开关状态(开)')"></i>
                            </div>
                            <div>
                                <span>设备报警</span>
                                <img v-if="this.configObject.dataBind.warnImageUrl" :src="configObject.dataBind.warnImageUrl" class="bgAvatar" @click="handleClick('开关状态(报警)')" crossorigin="anonymous" />
                                <i v-else class="el-icon-plus avatar-uploader-icon" @click="handleClick('开关状态(报警)')"></i>
                            </div>
                        </div>
                    </div>
                    <!-- 状态字段开始 -->
                    <div style="margin-bottom: 10px; line-height: 20px; font-weight: 700" v-if="configObject.componentShow && configObject.componentShow.indexOf('状态字段') > -1">
                        <span>{{ $t('index.editor.20250324-102') }}</span>
                        <i class="el-icon-plus" style="margin-right: 10px; margin-left: 10px; font-size: 18px" @click="addText"></i>
                        <i class="el-icon-delete" @click="deleteText" style="font-size: 18px"></i>
                        <div style="margin-top: 10px">
                            <el-row :gutter="5" style="margin-bottom: 10px" v-for="(item, index) in configObject.dataBind.stateTextList" :key="index">
                                <el-col :span="6">
                                    <el-select v-model="item.paramCondition" clearable placeholder="" size="small">
                                        <el-option label=">" value="大于" />
                                        <el-option label=">=" value="大于等于" />
                                        <el-option label="=" value="等于" />
                                        <el-option label="<=" value="小于等于" />
                                        <el-option label="<" value="小于" />
                                        <el-option label="!=" value="不等于" />
                                    </el-select>
                                </el-col>
                                <el-col :span="6">
                                    <el-input-number size="small" style="width: auto" v-model="item.paramData" clearable placeholder="" :controls="false"></el-input-number>
                                </el-col>
                                <el-col :span="6">
                                    <el-input v-model="item.paramText" size="small" placeholder="" />
                                </el-col>
                                <el-col :span="6">
                                    <el-color-picker v-model="item.foreColor" :predefine="predefineColors" color-format="hex" />
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                    <!-- 状态字段结束 -->
                    <!-- 填充颜色开始 -->
                    <div v-if="configObject.componentShow && configObject.componentShow.indexOf('组件填充') > -1">
                        <span style="line-height: 50px; font-weight: 700; margin-top: 20px">{{ $t('topo.components.topoProperties.038495-239') }}</span>
                        <i class="el-icon-plus" style="margin-right: 10px; margin-left: 10px; font-size: 18px" @click="addSwitch"></i>
                        <i class="el-icon-delete" @click="deleteSwitch" style="font-size: 18px"></i>
                        <div style="margin-top: 10px">
                            <el-row :gutter="5" style="margin-bottom: 10px" v-for="(item, index) in configObject.dataBind.stateList" :key="index">
                                <el-col :span="10">
                                    <el-select v-model="item.paramCondition" clearable :placeholder="$t('index.editor.20250324-12')" size="small">
                                        <el-option label=">" value="大于" />
                                        <el-option label=">=" value="大于等于" />
                                        <el-option label="=" value="等于" />
                                        <el-option label="<=" value="小于等于" />
                                        <el-option label="<" value="小于" />
                                        <el-option label="!=" value="不等于" />
                                    </el-select>
                                </el-col>
                                <el-col :span="7">
                                    <el-input-number size="small" style="width: auto" v-model="item.paramData" clearable :placeholder="$t('scada.topoMain.320129 - 3')" :controls="false"></el-input-number>
                                </el-col>
                                <el-col :span="7">
                                    <el-color-picker v-model="item.foreColor" :predefine="predefineColors" color-format="hex" />
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                    <!-- 填充颜色结束 -->
                    <!-- 天气组件开始 -->
                    <div v-if="configObject.componentShow && configObject.componentShow.indexOf('天气') > -1">
                        <el-divider></el-divider>
                        <div style="margin-bottom: 10px; line-height: 20px; font-weight: 700">
                            <span>{{ $t('topo.components.topoProperties.038495-240') }}</span>
                        </div>
                        <div>
                            <span style="line-height: 50px; font-weight: 700; margin-right: 10px">{{ $t('topo.components.topoProperties.038495-241') }}</span>
                            <span v-show="false">{{ provinceCode }}</span>
                            <el-select v-model="configObject.dataBind.provinceCode" :placeholder="$t('topo.components.topoProperties.038495-242')" clearable size="small" filterable @change="provinceChange">
                                <el-option v-for="pro in provinceList" :key="pro.provinceZh" :label="pro.provinceZh" :value="pro.provinceZh"></el-option>
                            </el-select>
                        </div>
                        <div>
                            <span style="line-height: 50px; font-weight: 700; margin-right: 10px">{{ $t('topo.components.topoProperties.038495-243') }}</span>
                            <el-select v-model="configObject.dataBind.cityCode" :placeholder="$t('topo.components.topoProperties.038495-244')" clearable size="small" filterable @change="cityChange">
                                <el-option v-for="city in cityList" :key="city.leaderZh" :label="city.leaderZh" :value="city.leaderZh"></el-option>
                            </el-select>
                        </div>
                        <div>
                            <span style="line-height: 50px; font-weight: 700; margin-right: 10px">{{ $t('topo.components.topoProperties.038495-245') }}</span>
                            VR
                            <el-select v-model="configObject.dataBind.districtCode" :placeholder="$t('topo.components.topoProperties.038495-246')" clearable size="small" filterable>
                                <el-option v-for="dis in districtList" :key="dis.id" :label="dis.cityZh" :value="dis.id"></el-option>
                            </el-select>
                        </div>
                        <div style="color: #ffb527">
                            <span>{{ $t('topo.components.topoProperties.038495-247') }}</span>
                        </div>
                        <div>
                            <i class="el-icon-warning-outline"></i>
                            <span>{{ $t('topo.components.topoProperties.038495-248') }}</span>
                        </div>
                    </div>
                    <!-- 天气组件结束 -->
                    <!-- VR绑定数据开始 -->
                    <div v-for="(item, index) in configObject.style.markers" :key="index">
                        <el-row style="margin-top: 10px" v-if="configObject.componentShow && configObject.componentShow.indexOf('VR') > -1">
                            <el-col :span="20">
                                <el-input :placeholder="$t('topo.components.topoProperties.038495-195')" v-model="item.dataBind.paramName" readonly size="small">
                                    <el-button slot="append" @click="selectVariable('VR参数绑定', item)">{{ $t('select') }}</el-button>
                                </el-input>
                            </el-col>
                            <el-col :span="4">
                                <img :src="item.vrUrl" class="vrAvatar" @click="handleClick('图片锚点', item)" crossorigin="anonymous" />
                            </el-col>
                        </el-row>
                    </div>
                    <!-- VR绑定数据结束 -->

                    <!-- 摄像头 -->
                    <template v-if="configObject.componentShow && configObject.componentShow.indexOf('摄像头') > -1">
                        <el-divider></el-divider>
                        <el-row>
                            <el-col :span="24">
                                <el-select v-model="configObject.deviceChannel" :placeholder="$t('index.editor.20250324-106')" size="small" value-key="id" @change="handleChangeDeviceChannel">
                                    <el-option v-for="(item, index) in videoOption" :key="item.serialNumber" :value="item" :label="`${item.deviceName}(${item.channelName || item.channelSipId})`">
                                        <el-tooltip class="item" effect="dark" placement="left-start">
                                            <div slot="content">
                                                <div>{{ $t('index.editor.20250324-103') }}{{ item.citycode }}</div>
                                                <div>{{ $t('index.editor.20250324-104') }}{{ item.deviceSipId }}</div>
                                                <div>{{ $t('index.editor.20250324-105') }}{{ item.channelSipId }}</div>
                                            </div>
                                            <div style="display: flex; justify-content: space-between; align-items: flex-end">
                                                <div>{{ item.deviceName }}</div>
                                                <div style="color: #8492a6; font-size: 10px">{{ item.channelName || item.channelSipId }}</div>
                                            </div>
                                        </el-tooltip>
                                    </el-option>
                                </el-select>
                            </el-col>
                        </el-row>

                        <!-- <el-form-item label="设备序列号">
                          <el-input v-model="configObject.dataBind.serialNumber" placeholder="萤石云控制台获取" size="small"/>
                        </el-form-item>
                        <el-form-item label="通道号">
                          <el-input v-model="configObject.dataBind.channelNumber" placeholder="萤石云控制台获取" size="small"/>
                        </el-form-item>
                        <el-form-item label="accessToken">
                          <el-input v-model="configObject.dataBind.accessToken" placeholder="萤石云控制台获取" size="small"/>
                        </el-form-item> -->
                        <el-form-item :label="$t('index.editor.20250324-107')"></el-form-item>
                    </template>
                    <!-- 摄像头end -->
                </div>
                <!-- 画布图层 -->
                <div v-show="tabIndex == 2">
                    <div
                        v-for="(item, index) in topoData.components"
                        class="tab-index-3"
                        :key="index"
                        v-show="!item.isDelete"
                        :style="{ backgroundColor: configObject.identifier == item.identifier ? '#ecf5ff' : '', color: configObject.identifier == item.identifier ? '#409EFF' : '' }"
                    >
                        <img :src="item.icon" style="width: 15px; height: 15px; margin-right: 3px" v-if="item.icon" crossorigin="anonymous" />
                        <q-icon :name="item.qIcon" size="18px" v-else-if="item.qIcon" style="margin-right: 3px; margin-left: -3px" />
                        <img :src="item.style.url" style="width: 15px; height: 15px; margin-right: 3px" v-else-if="item.style.url" crossorigin="anonymous" />
                        <i class="el-icon-document" style="margin-right: 3px" v-else></i>
                        <span @click="componentClick(item)">{{ item.name == undefined ? item.type : item.name }}</span>
                        <i class="el-icon-view" style="margin-left: 5px; color: #21cc96" v-if="item.style.visible == undefined ? true : item.style.visible" @click="visibleClick(item)"></i>
                        <i class="el-icon-view" style="margin-left: 5px; color: #909399" v-else @click="visibleClick(item)"></i>
                        <i class="el-icon-edit" style="margin-left: 5px; color: #409eff" @click="nameUpdateClick(item)" v-if="configObject.identifier == item.identifier"></i>
                        <i class="el-icon-delete" style="margin-left: 5px; color: #e6a23c" @click="removeItem()" v-if="configObject.identifier == item.identifier"></i>
                    </div>
                </div>
            </div>
        </template>
        <!-- 界面背景设置 -->
        <template v-if="isLayer">
            <el-form class="topo-form">
                <el-form-item :label="$t('topo.components.topoProperties.038495-249')">
                    <el-input :placeholder="$t('topo.components.topoProperties.038495-250')" v-model="topoData.name" size="small"></el-input>
                </el-form-item>
                <el-form-item :label="$t('scada.center.indeieScada.373453-6')">
                    <el-select v-model="layerWH" :placeholder="$t('index.editor.20250324-12')" size="small" style="width: 100%">
                        <el-option v-for="item in fblOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('topo.components.topoProperties.038495-251')" v-if="layerWH == 'custom'">
                    <el-input-number :placeholder="$t('topo.components.topoProperties.038495-252')" v-model="topoData.layer.width" size="small" :controls="false" :min="100" style="width: 180px" />
                </el-form-item>
                <el-form-item :label="$t('topo.components.topoProperties.038495-253')" v-if="layerWH == 'custom'">
                    <el-input-number :placeholder="$t('topo.components.topoProperties.038495-254')" v-model="topoData.layer.height" size="small" :controls="false" :min="100" style="width: 180px" />
                </el-form-item>
                <el-form-item :label="$t('topo.components.topoProperties.038495-255')">
                    <el-color-picker v-model="topoData.layer.backColor" show-alpha :predefine="predefineColors" color-format="hex" size="small" />
                </el-form-item>
                <el-form-item :label="$t('topo.components.topoProperties.038495-256')">
                    <div style="position: relative" @mouseenter="mouseEnter" @mouseleave="mouseLeave">
                        <img v-if="topoData.layer.backgroundImage" :src="topoData.layer.backgroundImage" class="bgAvatar" @click="handleClick('背景图片')" crossorigin="anonymous" />
                        <i v-else class="el-icon-plus avatar-uploader-icon" @click="handleClick('背景图片')"></i>
                        <div class="iconHover" v-if="topoData.layer.backgroundImage && iconShow" @mouseenter="mouseEnter" @mouseleave="mouseLeave">
                            <i class="el-icon-plus avatar-upload-icon" @click="handleClick('背景图片')"></i>
                            <i class="el-icon-delete avatar-delete-icon" @click="topoData.layer.backgroundImage = ''"></i>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item :label="$t('topo.components.topoProperties.038495-257')">
                    <el-switch v-model="topoData.layer.dragZoom" :active-text="$t('index.editor.20250324-108')" :inactive-text="$t('topo.components.topoProperties.038495-258')"></el-switch>
                </el-form-item>
            </el-form>
        </template>
        <el-dialog :title="$t('topo.components.topoProperties.038495-259')" :visible.sync="dialogVisible" width="1100px" :close-on-click-modal="false" append-to-body>
            <div class="dialogClass">
                <TopoSelectImage ref="topoSelectImage" />
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">{{ $t('cancel') }}</el-button>
                <el-button type="primary" @click="selectImageClick">{{ $t('confirm') }}</el-button>
            </span>
        </el-dialog>
        <!--图片动画设置  -->
        <el-dialog :title="animationTitle" :visible.sync="animationDialog" width="550px" :close-on-click-modal="false" append-to-body v-dialogDrag v-if="configObject && configObject.componentShow.indexOf('动画') > -1">
            <el-form class="topo-form">
                <el-form-item :label="$t('topo.components.topoProperties.038495-261')">
                    <el-input :placeholder="$t('topo.components.topoProperties.038495-195')" v-model="configObject.dataAction.paramName" readonly style="width: 380px">
                        <el-button slot="append" @click="selectVariable">{{ $t('select') }}</el-button>
                    </el-input>
                </el-form-item>
                <el-form-item :label="$t('topo.components.topoProperties.038495-262')" prop="paramJudge">
                    <el-row>
                        <el-col :span="10" style="margin-right: 20px">
                            <el-select v-model="configObject.dataAction.paramJudge" clearable :placeholder="$t('index.editor.20250324-12')">
                                <el-option label="大于" value="大于" />
                                <el-option label="大于等于" value="大于等于" />
                                <el-option label="等于" value="等于" />
                                <el-option label="小于等于" value="小于等于" />
                                <el-option label="小于" value="小于" />
                                <el-option label="不等于" value="不等于" />
                            </el-select>
                        </el-col>
                        <el-col :span="10">
                            <el-input-number v-model="configObject.dataAction.paramJudgeData" clearable :placeholder="$t('scada.topoMain.320129 - 3')" :controls="false"></el-input-number>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item :label="$t('topo.components.topoProperties.038495-264')" v-if="clickText == '旋转'" prop="rotationSpeed">
                    <el-radio v-model="configObject.dataAction.rotationSpeed" label="快">快</el-radio>
                    <el-radio v-model="configObject.dataAction.rotationSpeed" label="中">中</el-radio>
                    <el-radio v-model="configObject.dataAction.rotationSpeed" label="慢">慢</el-radio>
                </el-form-item>
                <div v-if="clickText == '滑动'">
                    <el-form-item label="滑动配置">
                        <el-button icon="el-icon-plus" circle @click="addTranslate"></el-button>
                        <el-button icon="el-icon-delete" circle @click="deleteTranslate"></el-button>
                    </el-form-item>
                    <el-form-item label="滑动周期">
                        <el-input-number v-model="configObject.dataAction.duration" clearable placeholder="请输入滑动周期(秒)" :controls="false" style="align: center; margin-right: 10px; width: 320px"></el-input-number>
                    </el-form-item>
                    <el-form-item label="滑动位置" v-for="(item, index) in configObject.dataAction.translateList" :key="index">
                        <el-select v-model="item.direction" placeholder="请选择偏移方向" style="align: center; margin-right: 10px; width: 150px">
                            <el-option label="水平" value="水平" />
                            <el-option label="竖直" value="竖直" />
                        </el-select>
                        <el-input-number v-model="item.position" clearable placeholder="请输入偏移度" :controls="false" style="align: center; margin-right: 10px; width: 150px"></el-input-number>
                    </el-form-item>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="animationDialog = false">取 消</el-button>
                <el-button type="primary" @click="animationSubmit">确 定</el-button>
            </div>
        </el-dialog>
        <!--事件单击设置  -->
        <el-dialog :title="singleClickTitle" :visible.sync="singleClickDialog" width="650px" v-if="configObject && configObject.componentShow.indexOf('单击') > -1" :close-on-click-modal="false" append-to-body>
            <el-form class="topo-form">
                <div v-show="false">
                    <el-form-item label="设备编号">
                        <el-input v-model="configObject.dataBind.imei" />
                    </el-form-item>
                    <el-form-item label="驱动名称">
                        <el-input v-model="configObject.dataBind.driveName" />
                    </el-form-item>
                    <el-form-item label="变量字段">
                        <el-input v-model="configObject.dataBind.paramField" />
                    </el-form-item>
                    <el-form-item label="数据类型">
                        <el-input v-model="configObject.dataBind.dataType" />
                    </el-form-item>
                </div>
                <el-form-item label="鼠标">
                    <el-radio-group v-model="configObject.dataBind.event">
                        <el-radio label="click">单击</el-radio>
                        <el-radio label="dblclick">双击</el-radio>
                        <el-radio label="mouseenter">移入</el-radio>
                        <el-radio label="mouseleave">移出</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="动作">
                    <el-radio-group v-model="configObject.dataBind.action" @change="handleRadioChange(configObject.dataBind.action)">
                        <el-radio label="操作变量">操作变量</el-radio>
                        <el-radio label="变量信息">变量信息</el-radio>
                        <el-radio label="外部链接">外部链接</el-radio>
                        <el-radio label="组态界面">组态界面</el-radio>
                        <el-radio label="开关控制" v-if="configObject.type == 'imageSwitch'">开关控制</el-radio>
                        <el-radio label="函数定义">函数定义</el-radio>
                        <el-radio label="组件显示">组件显示</el-radio>
                        <el-radio label="组件隐藏">组件隐藏</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="变量名称" v-if="configObject.dataBind.action == '操作变量' || configObject.dataBind.action == '开关控制' || configObject.dataBind.action == '变量信息'">
                    <el-input placeholder="请选择变量" v-model="configObject.dataBind.paramName" readonly style="width: 100%">
                        <el-button slot="append" @click="selectVariable">选择</el-button>
                    </el-input>
                </el-form-item>
                <el-form-item label="写入值" v-if="configObject.dataBind.action == '操作变量'">
                    <el-input v-model="configObject.dataBind.paramValue" :controls="false" style="width: 100%" placeholder="为空即为可变值" />
                </el-form-item>
                <el-form-item label="提示信息" v-if="configObject.dataBind.action == '操作变量'">
                    <el-input v-model="configObject.dataBind.tipMsg" :controls="false" style="width: 100%" placeholder="请输入提示信息" />
                </el-form-item>
                <el-form-item label="跳转链接" v-if="configObject.dataBind.action == '外部链接'">
                    <el-input v-model="configObject.dataBind.redirectUrl" style="width: 100%" />
                </el-form-item>
                <el-form-item label="开关控制" v-if="configObject.dataBind.action == '开关控制'">
                    <el-radio v-model="configObject.dataBind.controValue" label="0关1开">0关1开</el-radio>
                    <el-radio v-model="configObject.dataBind.controValue" label="0开1关">0开1关</el-radio>
                    <el-radio v-model="configObject.dataBind.controValue" label="多态开关">多态开关</el-radio>
                </el-form-item>
                <el-form-item label="组态界面" v-if="configObject.dataBind.action == '组态界面'">
                    <el-select v-model="configObject.dataBind.ztPage" clearable :placeholder="$t('index.editor.20250324-12')" style="width: 100%" @change="selectZtPage">
                        <el-option :label="item.pageName" :value="item.guid" v-for="item in ztOption" :key="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="打开方式" v-if="configObject.dataBind.action == '组态界面'">
                    <el-radio v-model="configObject.dataBind.openModels" :label="1" @change="handleRadioChange(configObject.dataBind.action)">当前窗口打开</el-radio>
                    <el-radio v-model="configObject.dataBind.openModels" :label="2" @change="handleRadioChange(configObject.dataBind.action)">打开新窗口</el-radio>
                    <el-radio v-model="configObject.dataBind.openModels" :label="3" @change="handleRadioChange(configObject.dataBind.action)">弹出小窗口</el-radio>
                </el-form-item>
                <el-form-item label="窗口宽度" v-if="configObject.dataBind.openModels == '3'">
                    <el-input v-model="configObject.dataBind.windowWidth" style="width: 100%" />
                </el-form-item>
                <el-form-item label="窗口高度" v-if="configObject.dataBind.openModels == '3'">
                    <el-input v-model="configObject.dataBind.windowHeight" style="width: 100%" />
                </el-form-item>
                <el-form-item label="函数" v-if="configObject.dataBind.action == '函数定义'">
                    <el-input type="textarea" :rows="5" placeholder="请输入JavaScript脚本内容" v-model="configObject.dataBind.function" />
                </el-form-item>
                <el-form-item label="组件绑定" v-if="configObject.dataBind.action == '组件隐藏' || configObject.dataBind.action == '组件显示'">
                    <el-select v-model="configObject.dataBind.identifiers" multiple :placeholder="$t('index.editor.20250324-12')" style="width: 100%">
                        <el-option v-for="item in topoData.components" :key="item.identifier" :label="item.name" :value="item.identifier"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="singleClickDialog = false">取 消</el-button>
                <el-button type="primary" @click="animationSubmit">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog width="1100px" title="变量选择" :visible.sync="variableDialog" append-to-body :close-on-click-modal="false">
            <TopoVariable ref="topoVariable" :multiple="multiple" :textStatic="textStatic" />
            <span slot="footer" class="dialog-footer">
                <el-button @click="variableDialog = false">取 消</el-button>
                <el-button type="primary" @click="selectVariableClick">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="数据引擎" :visible.sync="dialogTip" width="50%" append-to-body :close-on-click-modal="false" v-dialogDrag v-if="configObject" :fullscreen="dialogFull">
            <div>
                <div style="position: absolute; top: 20px; right: 50px" @click="handelFull">
                    <i class="el-icon-full-screen"></i>
                </div>
                <div style="font-size: 20px; margin-bottom: 20px">
                    <a href="https://www.isqqw.com/" target="_blank">Echarts图表合集-仅支持vue语法糖、数据引擎-echartData</a>
                    <i class="el-icon-info" @click="dialogExplain = true" style="color: #e6a23c; margin-left: 5px"></i>
                </div>
                <div class="box-message" style="max-height: 200px">
                    <el-input type="textarea" :autosize="{ minRows: 3 }" placeholder="请输入响应示例" v-model="configObject.dataBind.echartData"></el-input>
                </div>
                <div class="box-message">
                    <ace @input="aceInput" ref="ace" v-model="configObject.dataBind.echartOption" />
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="echartRunClick">运 行</el-button>
                <el-button @click="dialogTip = false">关 闭</el-button>
            </span>
        </el-dialog>
        <el-dialog title="数据引擎示例" :visible.sync="dialogExplain" width="30%" append-to-body :close-on-click-modal="false">
            <div class="box__message" v-html="topoUtil.getEchartExplain()"></div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogExplain = false">关 闭</el-button>
            </span>
        </el-dialog>
        <el-dialog title="3D模型" :visible.sync="dialogLoader" width="30%" append-to-body :close-on-click-modal="false" v-if="configObject">
            <ModelList :moduleName="configObject.name" :moduleGuid="configObject.identifier" @modelList="modelList" ref="modelList" />
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogLoader = false">关 闭</el-button>
            </span>
        </el-dialog>
        <el-dialog title="重命名" :visible.sync="dialogVisibleRename" width="20%" :close-on-click-modal="false" append-to-body>
            <el-input v-model="renameValue" placeholder="请输入名称"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleRename = false">取 消</el-button>
                <el-button type="primary" @click="submitRename">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="公共配置" :visible.sync="dialogVisibleInterface" width="750px" append-to-body :close-on-click-modal="false" v-if="configObject">
            <div>
                请求地址：
                <el-select v-model="configObject.dataBind.method" :placeholder="$t('index.editor.20250324-12')" style="width: 90px; margin-right: 5px">
                    <el-option label="get" value="get"></el-option>
                    <el-option label="post" value="post"></el-option>
                    <el-option label="put" value="put"></el-option>
                </el-select>
                <el-input placeholder="例：http:127.0.0.1/" v-model="configObject.dataBind.url" style="width: 500px" />
            </div>
            <div style="margin-top: 20px">
                请求间隔：
                <el-input-number v-model="configObject.dataBind.interval" :controls="false" :min="0" style="width: 90px; margin-right: 5px"></el-input-number>
                <el-select v-model="configObject.dataBind.intervalType" :placeholder="$t('index.editor.20250324-12')" style="width: 90px">
                    <el-option label="秒" value="秒"></el-option>
                    <el-option label="分" value="分"></el-option>
                    <el-option label="时" value="时"></el-option>
                </el-select>
            </div>
            <div style="margin-top: 20px; overflow-y: auto">
                <el-tabs style="height: 350px" v-model="configObject.dataBind.requestType">
                    <el-tab-pane label="Params">
                        <el-table :data="configObject.dataBind.paramData" style="width: 100%">
                            <el-table-column type="index" width="50" />
                            <el-table-column label="key" prop="key">
                                <template slot-scope="scope">
                                    <el-input :placeholder="$t('scada.topoMain.320129-3')" v-model="scope.row.key"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="value" prop="value">
                                <template slot-scope="scope">
                                    <el-input :placeholder="$t('scada.topoMain.320129-3')" v-model="scope.row.value"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="120">
                                <template slot-scope="scope">
                                    <el-button size="mini" @click="handleEdit(configObject.dataBind.paramData)">+</el-button>
                                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, configObject.dataBind.paramData)">-</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="Body">
                        <div style="margin-bottom: 10px">
                            <el-radio-group v-model="configObject.dataBind.contentType">
                                <el-radio :label="1">none</el-radio>
                                <el-radio :label="2">form-data</el-radio>
                                <el-radio :label="3">x-www-form-urlencoded</el-radio>
                                <el-radio :label="4">json</el-radio>
                                <el-radio :label="5">xml</el-radio>
                            </el-radio-group>
                        </div>
                        <el-empty description="该请求没有body体" v-if="configObject.dataBind.contentType == 1" :image-size="100"></el-empty>
                        <el-table :data="configObject.dataBind.bodyDataTable" style="width: 100%" v-else-if="configObject.dataBind.contentType == 2 || configObject.dataBind.contentType == 3">
                            <el-table-column type="index" width="50" />
                            <el-table-column label="key" prop="key">
                                <template slot-scope="scope">
                                    <el-input :placeholder="$t('scada.topoMain.320129-3')" v-model="scope.row.key"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="value" prop="value">
                                <template slot-scope="scope">
                                    <el-input :placeholder="$t('scada.topoMain.320129-3')" v-model="scope.row.value"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="120">
                                <template slot-scope="scope">
                                    <el-button size="mini" @click="handleEdit(configObject.dataBind.bodyDataTable)">+</el-button>
                                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, configObject.dataBind.bodyDataTable)">-</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-input
                            type="textarea"
                            :rows="8"
                            placeholder="请输入内容"
                            v-model="configObject.dataBind.bodyDataArea"
                            v-else-if="configObject.dataBind.contentType == 4 || configObject.dataBind.contentType == 5"
                        ></el-input>
                    </el-tab-pane>
                    <el-tab-pane label="Header">
                        <el-table :data="configObject.dataBind.headerData" style="width: 100%">
                            <el-table-column type="index" width="50" />
                            <el-table-column label="key" prop="key">
                                <template slot-scope="scope">
                                    <el-input :placeholder="$t('scada.topoMain.320129-3')" v-model="scope.row.key"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="value" prop="value">
                                <template slot-scope="scope">
                                    <el-input :placeholder="$t('scada.topoMain.320129-3')" v-model="scope.row.value"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="120">
                                <template slot-scope="scope">
                                    <el-button size="mini" @click="handleEdit(configObject.dataBind.headerData)">+</el-button>
                                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, configObject.dataBind.headerData)">-</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleInterface = false">取 消</el-button>
                <el-button type="primary" @click="submitInterface">保 存</el-button>
            </span>
        </el-dialog>

        <el-dialog title="请选择oid名称" :visible.sync="oidopen" width="500px" append-to-body>
            <el-select v-model="oid" placeholder="请选择oid名称">
                <el-option v-for="item in oidList" :key="item.id" :label="item.oidName" :value="item.oid"></el-option>
            </el-select>
            <div slot="footer" class="dialog-footer">
                <el-button @click="oidopen = false">取 消</el-button>
                <el-button type="primary" @click="oidSubmit()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { mapMutations, mapState } from 'vuex';
import topoUtil from './util/topo-util';
import TopoSelectImage from './TopoSelectImage';
import TopoVariable from './TopoVariable';
import SetupAngle from './TopoAngle';
import ModelList from './model';
import { deepCopy } from '@/views/zutai/api/zutai/utils';
import { getToken } from '@/utils/auth';
import request from '@/utils/request';
import QIcon from '../QIcon/index.vue';
import { logger } from 'runjs/lib/common';
import { startPlay } from '@/api/iot/channel';

export default {
    name: 'TopoProperties',
    components: {
        QIcon,
        TopoSelectImage,
        TopoVariable,
        SetupAngle,
        ModelList,
    },
    data() {
        return {
            topoUtil: topoUtil,
            tabIndex: 0,
            predefineColors: [
                '#ff4500',
                '#ff8c00',
                '#ffd700',
                '#90ee90',
                '#00ced1',
                '#1e90ff',
                '#c71585',
                'rgba(255, 69, 0, 0.68)',
                'rgb(255, 120, 0)',
                'hsv(51, 100, 98)',
                'hsva(120, 40, 94, 0.5)',
                'hsl(181, 100%, 37%)',
                'hsla(209, 100%, 56%, 0.73)',
                '#c7158577',
                '#ffffff',
                '#000',
            ],
            fontFamilyOptions: ['Arial', 'Helvetica', 'sans-serif', '宋体', '黑体', '微软雅黑'],
            textAlignOptions: ['left', 'right', 'center', 'justify'],
            borderStyleOptions: ['solid', 'dashed', 'dotted'],
            fblOptions: [
                {
                    value: '960x600',
                    label: '小屏幕:960x600',
                },
                {
                    value: '1024x768',
                    label: '小屏幕:1024x768',
                },
                {
                    value: '选项3',
                    label: '小屏幕:1280x1024',
                },
                {
                    value: '1366x768',
                    label: 'PC网页:1366x768',
                },
                {
                    value: '1440x900',
                    label: 'PC网页:1440x900',
                },
                {
                    value: '1920x960',
                    label: 'PC网页:1920x960',
                },
                {
                    value: '1920x1080',
                    label: 'PC网页:1920x1080',
                },
                {
                    value: '2048x858',
                    label: '2K屏幕:2048x858',
                },
                {
                    value: '2048x1080',
                    label: '2K屏幕:2048x1080',
                },
                {
                    value: '3840x2160',
                    label: '4K屏幕:3840x2160',
                },
                {
                    value: '3656x2664',
                    label: '2K屏幕:3656x2664',
                },
                {
                    value: '4096x3112',
                    label: '4K屏幕:4096x3112',
                },
                {
                    value: 'custom',
                    label: '自定义',
                },
            ],
            layerWHTemp: '',
            dialogVisible: false,
            //当前的选择图片
            baseApi: process.env.VUE_APP_BASE_API,
            currentInput: '',
            bindParams: [],
            animationTitle: '动画设置',
            animationDialog: false,
            animationForm: {},
            clickText: '',

            singleClickTitle: '事件设置',
            singleClickDialog: false,

            //变量选择
            deviceImei: this.$route.query.deviceImei,
            variableDialog: false,

            //天气组件位置选择
            //省
            provinceList: [],
            //市
            cityList: [],
            //区
            districtList: [],
            slidePreview: null,

            //组态页面集合
            ztOption: [],

            //变量选择： false单选 true多选
            multiple: false,
            textStatic: '',
            ztModelOption: [],
            paramNameList: [
                '设备总数',
                '设备在线数',
                '设备离线数',
                '设备报警数',
                '在线比率',
                '日报警总数',
                '日报警已处理',
                '日报警未处理',
                '日报警处理比率',
                '周报警总数',
                '周报警已处理',
                '周报警未处理',
                '周报警处理比率',
                '月报警总数',
                '月报警已处理',
                '月报警未处理',
                '月报警处理比率',
                '年报警已处理',
                '年报警未处理',
                '年报警处理比率',
                '日工单总数',
                '日工单已处理',
                '日工单未处理',
                '日工单处理比率',
                '周工单总数',
                '周工单已处理',
                '周工单未处理',
                '周工单处理比率',
                '月工单总数',
                '月工单已处理',
                '月工单未处理',
                '月工单处理比率',
                '年工单总数',
                '年工单已处理',
                '年工单未处理',
                '年工单处理比率',
            ],
            bDeviceZtBindList: [],
            dialogTip: false,
            echartData: '',
            dialogExplain: false,
            dialogFull: false,
            angleStyle: {
                opacity: 0.1,
            },
            debouncedWatch: null,
            dialogLoader: false,

            //画布图层
            dialogVisibleRename: false,
            renameValue: '',
            renameItem: {},
            componentBackColor: '',
            //VR
            selectItem: {},
            iconShow: false,
            //折叠面板
            activeNames: ['2'],
            //接口配置
            dialogVisibleInterface: false,
            //视频列表
            videoOption: [],
            //对象变化，防止过多变化到历史记录里
            timer: null,
            //摄像头设备选择
            deviceChannel: null,
            oid: null,
            oidName: null,
            oidopen: false,
            oidList: [],
        };
    },
    computed: {
        layerWH: {
            get: function (val) {
                // console.log("val",this.layerWHTemp);
                if (this.layerWHTemp == 'custom') {
                    return 'custom';
                } else {
                    return this.topoData.layer.width + 'x' + this.topoData.layer.height;
                }
            },
            set: function (val) {
                this.layerWHTemp = val;
                if (val == 'custom') {
                    this.topoData.layer.width = 1920;
                    this.topoData.layer.height = 1080;
                } else {
                    var wh = val.split('x');
                    this.topoData.layer.width = parseInt(wh[0]);
                    this.topoData.layer.height = parseInt(wh[1]);
                }
            },
        },
        ...mapState({
            topoData: (state) => state.topoEditor.topoData,
            selectedComponents: (state) => state.topoEditor.selectedComponents,
            selectedComponentMap: (state) => state.topoEditor.selectedComponentMap,
            isLayer: (state) => state.topoEditor.selectedIsLayer,
            configObject: (state) => state.topoEditor.selectedComponent,
            historyData: (state) => state.topoEditor.historyData,
            historyDataMark: (state) => state.topoEditor.historyDataMark,
            batchModel: (state) => state.batchModel,
        }),
        animations() {
            let items = [];
            items =
                this.configObject.direction && this.configObject.direction == 'vertical'
                    ? [
                          { label: '向上', value: 'up' },
                          { label: '向下', value: 'down' },
                      ]
                    : [
                          {
                              label: '向右',
                              value: 'right',
                          },
                          { label: '向左', value: 'left' },
                      ];
            return items;
        },
        provinceCode() {
            // console.log("configObject",this.configObject);
            if (this.configObject != null) {
                this.provinceChange(this.configObject.dataBind.provinceCode);
                this.cityChange(this.configObject.dataBind.cityCode);
            }
        },
    },
    watch: {
        'configObject.style': {
            handler(newVal, oldVal) {
                if (newVal) {
                    clearTimeout(this.timer);
                    this.timer = null;
                    this.timer = setTimeout(() => {
                        this.historyData.push(deepCopy(this.topoData));
                        this.setHistoryDataMark(this.historyDataMark + 1);
                    }, 100);
                }
            },
            deep: true,
        },
    },
    mounted() {
        this.getZtPage();
        this.getZtModel();
        this.getProvinceList();
        this.getDeviceList();
        this.getVideoList();

        this.getOidList();
    },
    beforeDestroy() {
        clearTimeout(this.timer);
        this.timer = null;
    },
    methods: {
        // 选择oid后
        oidSubmit() {
            this.oidopen = false;
            this.configObject.dataBind.oid = this.oid;

            this.oidList.filter((item) => {
                if (item.oid === this.oid) {
                    this.configObject.dataBind.oidName = item.oidName;
                }
            });

            let url = '/data/response/list';
            let queryParams = {
                oid: this.oid,
                pageNum: 1,
                pageSize: 10,
            };
            request({
                url: url,
                method: 'get',
                params: queryParams,
            }).then((res) => {
                this.configObject.dataBind.SNMPList = res.rows;
                this.configObject.dataBind.total = res.total;
            });
        },
        // 获取所有oid
        getOidList() {
            let url = '/data/response/list';
            let queryParams = {
                oid: null,
                pageNum: 1,
                pageSize: 10,
            };
            request({
                url: url,
                method: 'get',
                params: queryParams,
            }).then((res) => {
                this.oidList = res.rows;
            });
        },
        // 选择oid
        selectOid() {
            this.oidopen = true;
        },
        ...mapMutations('topoEditor', ['setSelectedComponent', 'setLayerSelected', 'execute', 'setHistoryDataMark', 'setCarouselImage']),
        handleRadioChange(tab) {
            console.log(tab);
            if (tab != '组态界面') {
                this.configObject.dataBind.openModels = 0;
            }
        },
        getVideoList() {
            let query = {
                pageNum: 1,
                pageSize: 999,
                // ztGuid: this.$store.state.app.guid? this.$store.state.app.guid: this.$route.query.guid,
            };
            let url = '/sip/channel/list';
            request({
                url: url,
                method: 'get',
                params: query,
            }).then((res) => {
                console.log(res.rows);
                this.videoOption = res.rows;
            });
        },
        //公共配置开始
        handleEdit(row) {
            let data = {
                key: '',
                value: '',
            };
            row.push(data);
        },
        handleDelete(xh, row) {
            if (row.length == 1) {
                return;
            }
            row.forEach((element, index) => {
                if (index == xh) {
                    row.splice(index, 1);
                }
            });
        },
        submitInterface() {
            this.$emit('printData');
            this.dialogVisibleInterface = false;
        },
        sendHttpRequest() {
            // console.log('发起请求',this.configObject.dataBind);
            let url = this.configObject.dataBind.url;
            let method = this.configObject.dataBind.method;
            let data = {};
            let bodyDataTable = this.configObject.dataBind.bodyDataTable;
            for (let itemindex = 0; itemindex < bodyDataTable.length; itemindex++) {
                //$set()方法第一个参数是对象，第二个参数是key值，第三个参数是value值
                if (bodyDataTable[itemindex].key) {
                    this.$set(data, bodyDataTable[itemindex].key, bodyDataTable[itemindex].value);
                }
            }
            let contentType = '';
            if (this.configObject.dataBind.contentType == 2) {
                contentType = 'multipart/form-data';
            } else if (this.configObject.dataBind.contentType == 3) {
                contentType = 'application/x-www-form-urlencoded;charset=utf-8';
            } else if (this.configObject.dataBind.contentType == 4) {
                contentType = 'application/json;charset=utf-8';
                data = this.configObject.dataBind.bodyDataArea;
            } else if (this.configObject.dataBind.contentType == 5) {
                contentType = 'text/xml';
                data = this.configObject.dataBind.bodyDataArea;
            } else {
                contentType = 'application/json;charset=utf-8';
                data = {};
            }
            let postUrl = '/zutai/bEchartType/sendHttpRequest';
            let postData = {
                url: url,
                method: method,
                contentType: contentType,
                params: this.configObject.dataBind.paramData,
                headers: [
                    ...this.configObject.dataBind.headerData,
                    {
                        key: 'Authorization',
                        value: 'Bearer ' + getToken(),
                    },
                ],
                data: JSON.stringify(data),
                // sql:"select * from b_device_manager"
            };
            request({
                url: postUrl,
                method: 'post',
                data: postData,
            }).then((res) => {
                console.log('sendHttpRequest-获取成功!', res);
                if (res.code == 200) {
                    this.echartData = res.data;
                    this.configObject.dataBind.echartData = res.data;
                }
            });
        },
        //公共配置结束
        //轮播图
        carouselChange(style) {
            if (style.carouselNum > style.carouselImageList.length) {
                style.carouselImageList.push('');
            } else if (style.carouselNum < style.carouselImageList.length) {
                style.carouselImageList.splice(style.carouselNum, 1);
            }
        },
        //组件删除
        removeItem() {
            this.execute({ op: 'del' });
            this.setLayerSelected(true);
        },
        //修改组件名称
        nameUpdateClick(item) {
            this.renameItem = item;
            this.renameValue = this.renameItem.name == undefined ? this.renameItem.type : this.renameItem.name;
            this.dialogVisibleRename = true;
        },
        submitRename() {
            this.renameItem.name = this.renameValue;
            this.dialogVisibleRename = false;
        },
        //组件旋转
        componentClick(item) {
            this.setSelectedComponent(item);
            this.setLayerSelected(false);
        },
        //组件显示隐藏
        visibleClick(item) {
            if (item.style.visible == true) {
                item.style.visible = false;
            } else {
                item.style.visible = true;
            }
        },
        modelUploadClick() {
            this.dialogLoader = true;
            setTimeout(() => {
                this.$refs.modelList.getList();
            }, 200);
        },
        modelList(modelList) {
            console.log('modelList', modelList);
            this.configObject.loader.filePath = modelList;
            this.configObject.loader.position = [];
            this.configObject.loader.rotation = [];
            this.configObject.loader.scale = [];
            modelList.forEach((element, index) => {
                this.configObject.loader.position.push({
                    x: 0,
                    y: 0,
                    z: 0,
                });
                this.configObject.loader.rotation.push({
                    x: 0,
                    y: 0,
                    z: 0,
                });
                this.configObject.loader.scale.push({
                    x: 1,
                    y: 1,
                    z: 1,
                });
            });
        },
        mouseEnter() {
            (this.angleStyle = {
                opacity: 0.8,
            }),
                (this.iconShow = true);
        },
        mouseLeave() {
            this.angleStyle = {
                opacity: 0.1,
            };
            this.iconShow = false;
        },
        //增加滑动位置
        addTranslate() {
            let id = this.configObject.dataAction.translateList.length;
            console.log(this.configObject.dataAction.translateList);
            let state = {
                id: id + 1,
                direction: '',
                position: 0,
            };
            this.configObject.dataAction.translateList.push(state);
        },
        //删除滑动位置
        deleteTranslate() {
            let id = this.configObject.dataAction.translateList.length;
            this.configObject.dataAction.translateList.some((item, i) => {
                if (item.id == id) {
                    this.configObject.dataAction.translateList.splice(i, 1);
                    return true;
                }
            });
        },
        handelFull() {
            if (this.dialogFull) {
                this.dialogFull = false;
                this.$refs.ace.setMaxLines(20);
            } else {
                this.dialogFull = true;
                this.$refs.ace.setMaxLines(35);
            }
        },
        //ace编辑器
        aceInput(data) {
            console.log('ace编辑器', data);
            this.configObject.dataBind.echartOption = data;
        },
        //旋转角度
        onAngle(angle) {
            // console.log('旋转角度：',angle);
            this.transform('自定义旋转角度', angle);
        },
        //echats数据引擎
        echartHttpClick(dataUrl) {
            let query = {
                url: dataUrl,
            };
            let url = '/ignoreToken/getEchartData';
            request({
                url: url,
                method: 'get',
                params: query,
            }).then((response) => {
                console.log('获取图表数据', response.data);
                this.configObject.dataBind.echartData = JSON.stringify(JSON.parse(JSON.stringify(response.data)), null, '\t');
            });
        },
        //echart运行代码视图
        echartRunClick() {
            this.configObject.dataBind.echartRun = new Date().getTime();
            this.$message.success('运行成功');
            this.dialogTip = false;
        },
        //echart代码视图
        echartClick() {
            this.dialogTip = true;
            this.$nextTick(() => {
                if (this.dialogFull) {
                    this.$refs.ace.setMaxLines(35);
                } else {
                    this.$refs.ace.setMaxLines(20);
                }
            });
        },
        //增加状态开关
        addSwitch() {
            let id = this.configObject.dataBind.stateList.length;
            let state = {
                id: id + 1,
                paramCondition: '',
                paramData: '',
                imageUrl: '',
            };
            this.configObject.dataBind.stateList.push(state);
        },
        deleteSwitch() {
            let id = this.configObject.dataBind.stateList.length;
            this.configObject.dataBind.stateList.some((item, i) => {
                if (item.id == id) {
                    this.configObject.dataBind.stateList.splice(i, 1);
                    return true;
                }
            });
        },
        //增加状态字段
        addText() {
            let id = this.configObject.dataBind.stateTextList.length;
            let state = {
                id: id + 1,
                paramCondition: '',
                paramData: '',
                paramText: '',
            };
            this.configObject.dataBind.stateTextList.push(state);
        },
        deleteText() {
            let id = this.configObject.dataBind.stateTextList.length;
            this.configObject.dataBind.stateTextList.some((item, i) => {
                if (item.id == id) {
                    this.configObject.dataBind.stateTextList.splice(i, 1);
                    return true;
                }
            });
        },
        deviceChange() {
            this.getDeviceList();
        },
        getDeviceList() {
            let url = '/zutai/bDeviceZtBind/getDeviceBind';
            let param = {
                ztGuid: this.$store.state.app.guid ? this.$store.state.app.guid : this.$route.query.guid,
            };
            request({
                url: url,
                method: 'get',
                params: param,
            }).then((res) => {
                // console.log('获取成功!',res);
                if (res.code == 200) {
                    this.bDeviceZtBindList = res.rows;
                }
            });
        },
        getProvinceList() {
            let param = {
                lvl: 1,
            };
            let url = '/zutai/bDeviceManager/getArea';
            request({
                url: url,
                method: 'get',
                params: param,
            }).then((res) => {
                this.provinceList = res.data;
            });
        },
        selectModelChange() {
            this.ztModelOption.forEach((element) => {
                if (element.imageUrl == this.configObject.imageUrl) {
                    this.configObject.modelUrl = element.modelUrl;
                }
            });
        },
        getZtModel() {
            let query = {
                pageNum: 1,
                pageSize: 999,
                status: 0,
            };
            let url = '/zutai/bDeviceModel/list';
            request({
                url: url,
                method: 'get',
                params: query,
            }).then((res) => {
                this.ztModelOption = res.rows;
            });
        },
        stack(val) {
            // console.log("topoData", this.configObject);
            if (this.configObject) {
                let zIndex = 0;
                if (val == '置顶') {
                    zIndex = 999;
                    this.topoData.zIndexTop = zIndex;
                } else if (val == '置底') {
                    zIndex = -999;
                    this.topoData.zIndexBottom = zIndex;
                } else if (val == '上一层') {
                    zIndex = this.configObject.style.zIndex == undefined ? 1 : this.configObject.style.zIndex + 1;
                } else if (val == '下一层') {
                    zIndex = this.configObject.style.zIndex == undefined ? 1 : this.configObject.style.zIndex - 1;
                }
                for (var key in this.selectedComponentMap) {
                    var component = this.selectedComponentMap[key];
                    component.style.zIndex = zIndex;
                }
            }
        },
        transform(val, value) {
            if (this.configObject) {
                let transform = '';
                let transformType = '';
                if (val == '顺时针旋转') {
                    transform = this.configObject.style.transform + 90;
                    transformType = `rotate(` + transform + `deg)`;
                } else if (val == '逆时针旋转') {
                    transform = this.configObject.style.transform - 90;
                    transformType = `rotate(` + transform + `deg)`;
                } else if (val == '水平镜像') {
                    transform = 0;
                    transformType = `rotateY(180deg)`;
                } else if (val == '垂直镜像') {
                    transform = 0;
                    transformType = `rotateX(180deg)`;
                } else if (val == '自定义角度' && value) {
                    transform = this.configObject.style.transform + parseInt(value);
                    transformType = `rotate(` + transform + `deg)`;
                } else if (val == '自定义旋转角度' && value) {
                    transform = parseInt(value);
                    transformType = `rotate(` + transform + `deg)`;
                }
                // this.configObject.style.transform=transform;
                // this.configObject.style.transformType=transformType;
                // console.log("旋转格式",this.configObject.style.transformType);
                for (var key in this.selectedComponentMap) {
                    var component = this.selectedComponentMap[key];
                    component.style.transform = transform;
                    component.style.transformType = transformType;
                }
            }
        },
        selectZtPage() {
            console.log('初始化界面名称', this.configObject.dataBind.ztPage);
            this.ztOption.forEach((element) => {
                if (element.guid == this.configObject.dataBind.ztPage) {
                    this.configObject.dataBind.ztPageName = element.pageName;
                }
            });
        },
        getZtPage() {
            let query = {
                pageNum: 1,
                pageSize: 999,
                //deviceMac:this.$route.query.deviceImei,
            };
            let url = '/zutai/bDeviceZt/list';
            request({
                url: url,
                method: 'get',
                params: query,
            }).then((res) => {
                this.ztOption = res.rows;
            });
        },
        createCode() {
            var code = '';
            //设置长度，这里看需求，我这里设置了4
            var codeLength = 4;

            //设置随机字符
            var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9);

            //循环codeLength 我设置的4就是循环4次
            for (var i = 0; i < codeLength; i++) {
                //设置随机数范围,这设置为0 ~ 36
                var index = Math.floor(Math.random() * 9);

                //字符串拼接 将每次随机的字符 进行拼接
                code += random[index];
            }

            //将拼接好的字符串赋值给展示的code
            return code;
        },
        provinceChange(item) {
            let param = {
                provinceZh: item,
                lvl: 2,
            };
            let url = '/zutai/bDeviceManager/getArea';
            request({
                url: url,
                method: 'get',
                params: param,
            }).then((res) => {
                this.cityList = res.data;
            });
        },
        cityChange(item) {
            let param = {
                leaderZh: item,
                lvl: 3,
            };
            let url = '/zutai/bDeviceManager/getArea';
            request({
                url: url,
                method: 'get',
                params: param,
            }).then((res) => {
                this.districtList = res.data;
            });
        },
        selectVariableClick() {
            this.variableDialog = false;
            let selectRowData = null;
            if (this.clickText == '多参数绑定') {
                selectRowData = this.$refs.topoVariable.selectRowsDataClick();
                console.log('多参数绑定', selectRowData);
            } else {
                selectRowData = this.$refs.topoVariable.selectRowDataClick();
                console.log('单参数绑定', selectRowData, this.clickText);
            }
            // console.log('选中的记录',selectRowData);
            if (this.clickText == '闪烁' || this.clickText == '旋转' || this.clickText == '显隐' || this.clickText == '滑动') {
                this.configObject.dataAction.imei = selectRowData.deviceImei;
                this.configObject.dataAction.paramField = selectRowData.paramField;
                this.configObject.dataAction.paramName = selectRowData.paramName;
                this.configObject.dataAction.acquisitionFormula = selectRowData.acquisitionFormula;
                this.configObject.dataAction.writeFormula = selectRowData.writeFormula;
                this.configObject.dataAction.readWriteType = selectRowData.readWriteType;
            } else if (this.clickText == '参数绑定') {
                this.configObject.dataBind.paramField = selectRowData.paramField;
                this.configObject.dataBind.paramName = selectRowData.paramName;
                this.configObject.dataBind.acquisitionFormula = selectRowData.acquisitionFormula;
                this.configObject.dataBind.writeFormula = selectRowData.writeFormula;
                this.configObject.dataBind.readWriteType = selectRowData.readWriteType;
                if (selectRowData.paramUnit) {
                    this.configObject.dataBind.paramUnit = selectRowData.paramUnit;
                }
                this.configObject.dataBind.imei = selectRowData.deviceImei;
                this.configObject.dataBind.driveName = selectRowData.driveName;
                this.configObject.dataBind.dataType = selectRowData.dataType;
                console.log('参数绑定', selectRowData);
            } else if (this.clickText == '单击') {
                console.log('单击选择', selectRowData);
                this.configObject.dataBind.paramField = selectRowData.paramField;
                this.configObject.dataBind.paramName = selectRowData.paramName;
                this.configObject.dataBind.imei = selectRowData.deviceImei;
                this.configObject.dataBind.driveName = selectRowData.driveName;
                this.configObject.dataBind.dataType = selectRowData.dataType;
                this.configObject.dataBind.acquisitionFormula = selectRowData.acquisitionFormula;
                this.configObject.dataBind.writeFormula = selectRowData.writeFormula;
                this.configObject.dataBind.readWriteType = selectRowData.readWriteType;
            } else if (this.clickText == '多参数绑定') {
                console.log('多参数绑定', selectRowData);
                this.configObject.style.header = selectRowData;
                this.configObject.dataBind.paramName = selectRowData.join(',');
                // this.configObject.dataBind.imei = selectRowData.deviceImei;
            } else if (this.clickText == 'VR参数绑定') {
                this.selectItem.dataBind.paramField = selectRowData.paramField;
                this.selectItem.dataBind.acquisitionFormula = selectRowData.acquisitionFormula;
                this.selectItem.dataBind.writeFormula = selectRowData.writeFormula;
                this.selectItem.dataBind.imei = selectRowData.deviceImei;
                if (selectRowData.paramUnit) {
                    this.selectItem.dataBind.paramUnit = selectRowData.paramUnit;
                }
                this.selectItem.dataBind.paramName = selectRowData.paramName;
                this.configObject.selectVRId = this.selectItem.id + '&' + this.selectItem.dataBind.paramName + '&' + this.selectItem.vrUrl;
            }
        },
        selectVariable(val, item) {
            console.log(val);
            if (val == '参数绑定') {
                console.log(this.configObject.type);
                if (this.configObject.type == 'realData') {
                    this.multiple = true;
                    this.clickText = '多参数绑定';
                    this.textStatic = '';
                } else if (this.configObject.type == 'textStatic') {
                    this.multiple = true;
                    this.clickText = '多参数绑定';
                    this.textStatic = '数统计';
                } else {
                    this.multiple = false;
                    this.clickText = val;
                }
            }
            if (item) {
                this.selectItem = item;
                this.multiple = false;
                this.clickText = val;
            }
            // console.log("multiple",this.multiple);
            this.variableDialog = true;
        },
        configClick(val) {
            if (val == '单击') {
                this.singleClickDialog = true;
            } else {
                this.animationDialog = true;
            }
            this.clickText = val;
        },
        animationSubmit() {
            this.animationDialog = false;
            this.singleClickDialog = false;
            this.$emit('printData');
        },
        handleClick(label, item) {
            this.currentInput = label;
            this.dialogVisible = true;
            if (item) {
                this.selectItem = item;
            }
        },
        selectImageClick() {
            let selectImage = this.$refs.topoSelectImage.handleChoice()[this.$refs.topoSelectImage.handleChoice().length - 1];
            this.dialogVisible = false;
            // console.log("选中图片",selectImage)

            if (this.currentInput == '背景图片') {
                this.topoData.layer.backgroundImage = this.baseApi + selectImage.resourceUrl;
            } else if (this.currentInput == '图片路径') {
                this.configObject.style.url = this.baseApi + selectImage.resourceUrl;
            } else if (this.currentInput == '开关状态(关)') {
                this.configObject.dataBind.shutImageUrl = this.baseApi + selectImage.resourceUrl;
            } else if (this.currentInput == '开关状态(开)') {
                this.configObject.dataBind.openImageUrl = this.baseApi + selectImage.resourceUrl;
            } else if (this.currentInput == '开关状态(报警)') {
                this.configObject.dataBind.warnImageUrl = this.baseApi + selectImage.resourceUrl;
            } else if (this.currentInput.indexOf('状态开关') > -1) {
                let id = this.currentInput.split('-')[1];
                this.configObject.dataBind.stateList.forEach((element) => {
                    if (element.id == id) {
                        element.imageUrl = this.baseApi + selectImage.resourceUrl;
                    }
                });
            } else if (this.currentInput == '图片锚点') {
                this.selectItem.vrUrl = this.baseApi + selectImage.resourceUrl;
                this.configObject.selectVRId = this.selectItem.id + '&' + this.selectItem.dataBind.paramName + '&' + this.selectItem.vrUrl;
            } else if (this.currentInput.indexOf('轮播图片') > -1) {
                let index = parseInt(this.currentInput.split('-')[1]);
                let serverUrl = window.location.href.split('/#/')[0];
                this.configObject.style.carouselImageList[index] = serverUrl + this.baseApi + selectImage.resourceUrl;
                this.setCarouselImage(this.configObject.style.carouselImageList);
            }
        },
        dialogClick() {
            //this.dialogVisible=true;
        },
        initPage(configData) {
            this.configData = configData;
        },
        changeTab(tabIndex) {
            console.log(this.configObject);
            this.tabIndex = tabIndex;
        },
        bindData(configObject, index, isLayer) {
            this.configObject = configObject;
            this.isLayer = isLayer;
            if (isLayer === false) {
            }
        },
        generateTargetComponentOptions() {
            var options = [];
            this.topoData.components.forEach((component) => {
                if (this.configObject.identifier != component.identifier) {
                    options.push({
                        label: component.name || component.type,
                        value: component.identifier,
                    });
                }
            });
            return options;
        },
        removeAction(index) {
            this.configObject.action.splice(index, 1);
        },
        addAction() {
            var action = {
                type: 'click',
                action: '开关控制',
                showItems: [],
                hideItems: [],
            };
            this.configObject.action.push(action);
        },
        //摄像头的
        handleChangeDeviceChannel(deviceChannel) {
            startPlay(deviceChannel.deviceSipId, deviceChannel.channelSipId).then((res) => {
                if (res.data && res.data.playurl) {
                    //赋值视频地址
                    this.configObject.videoUrl = res.data.playurl;
                }
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.topo-properties {
    margin-bottom: 0px !important;

    .el-form.topo-form {
        padding: 1em 2em;

        .el-form-item {
            margin-bottom: 1em !important;

            ::v-deep .el-form-item__label {
                color: #606266 !important;
                //line-height: 24px;
            }
        }
    }
}

.title {
    text-align: center;
    background-color: #666;
    font-size: 20px;
    color: #fff;
}

.dialogClass {
    height: 550px;
    overflow-y: hidden;
    overflow-x: hidden;
}

.topo-properties {
    border: #e6e6e6 solid 1px;
    //background-color: #f1f3f4;
    background-color: #fff;
    overflow-x: auto;
    // box-shadow: #C6BABA 0px 0px 20px;
    width: 100%;
    height: calc(100vh - 61px);

    .topo-properties-tabs {
        height: 48px;
        display: flex;
        //border-bottom: #ccc solid 1px;
        //background-color: #f1f3f4;

        .topo-properties-tab {
            height: 48px;
            text-align: center;
            line-height: 48px;
            flex: 1;
            font-size: 14px;
            //color: #666;
        }

        .topo-properties-tab + .topo-properties-tab {
            //border-left: #ccc solid 1px;
        }

        .topo-properties-tab:hover {
            cursor: pointer;
        }

        .topo-properties-tab-active {
            color: var(--primary-color);
            border-bottom: var(--primary-color) solid 2px;
            font-weight: bold;
        }
    }

    .topo-properties-table {
        overflow-x: hidden;
        overflow-y: auto;
        height: calc(100% - 92px);
    }

    .not-surpport {
        margin: 20px auto;
        text-align: center;
        font-size: 18px;
    }
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100%;
    height: 100px;
    background-color: rgb(104, 102, 102);
    line-height: 100px;
    margin-right: 15px;
    text-align: center;
}

.avatar-switch {
    width: 30px;
    height: 30px;
}

.avatar-uploader-icon-switch {
    font-size: 20px;
    color: #8c939d;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
}

.bgAvatar {
    width: 100%;
    height: 100px;
    margin: 0 10px 10px 10px;
}

.avatar {
    width: 30px;
    height: 30px;
    margin: 0 10px 10px 10px;
}

.vrAvatar {
    width: 40px;
    height: 40px;
    padding: 5px;
}

.tab-index-2 {
    font-size: 12px;
    font-weight: 400;
    color: #7f838c;
    line-height: 18px;
    padding: 5px;
}

.tab-index-3 {
    font-size: 14px;
    font-weight: 400;
    color: #7f838c;
    line-height: 20px;
    width: auto;
    max-width: 100%;
    padding: 3px;
    //background-color: #f1f3f4;
    margin-bottom: 3px;
    margin-left: 10px;
}

.tab-index-3:hover {
    cursor: pointer;
}

.iconHover {
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #fff;
    width: 100%;
    height: 100px;
    opacity: 0.5;
    text-align: center;
    line-height: 100px;
}

.avatar-delete-icon {
    font-size: 25px;
    color: red;
    text-align: center;
    margin-left: 10px;
    cursor: pointer;
}

.avatar-upload-icon {
    font-size: 25px;
    color: #67c23a;
    text-align: center;
    cursor: pointer;
}
</style>
<style>
.topo-properties .el-collapse-item__content {
    padding-bottom: 5px !important;
}

.topo-properties .el-input-number .el-input__inner {
    text-align: left !important;
    border-width: 1px;
    /* background: #f1f3f4 !important; */
}

.topo-properties .el-input-number--small {
    width: 100%;
}

.topo-properties-table::-webkit-scrollbar-thumb {
    background-color: #ddd;
}

.topo-properties-table::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    position: absolute;
}

.topo-properties-table::-webkit-scrollbar-track {
    background-color: #ddd;
}

.box-message {
    text-align: left;
    overflow-y: auto;
    margin-bottom: 10px;
}

.box-message .el-textarea__inner {
    background-color: #eef2f6;
}

.box-message ::-webkit-scrollbar-thumb {
    background-color: #ddd;
}

.box-message ::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    position: absolute;
}

.box-message ::-webkit-scrollbar-track {
    background-color: #ddd;
}

.box__message {
    padding: 20px;
    border: 1px solid #f4dfb6;
    background: #fffbf4;
    text-align: left;
    height: 500px;
    overflow-y: auto;
}

.tabClass {
    padding: 5px;
}

.tabClass .el-collapse-item__header {
    color: #000;
    font-weight: 700;
    font-size: 12px;
    text-indent: 10px;
}
</style>
